需求

有时候我们想仅仅在前端页面href跳转到另一个页面，不用后台交互，但是想传一些数据给新页面显示（仅前端实现）。

案例

例如这些显示不全的单元格信息，想要点击打开一个新网页详细显示，但是不会再和后台交互那么麻烦。

解决方法 — localStorge

使用localStorge，思想和后台的HttpSession很像
localStorge的API和语法介绍

只读的localStorage 允许你访问一个Document 的远端（origin）对象 Storage；数据存储为跨浏览器会话。 localStorage 类似于sessionStorage。区别在于，数据存储在 localStorage 是无期限的，而当页面会话结束——也就是说当页面被关闭时,数据存储在sessionStorage 会被清除 。

localStorge简单说就是一个页面数据临时存储器，其生命周期只有浏览器页面生存的时间，页面关闭就没了，对整个项目有效。和HttpSession对ip很像

核心代码：

// 新建一对key-value到localStorge
localStorge.setItem("key", "value");

// 从localStorge通过key获取value
var value = localStorge.getItem("key");

这两个语句可以放在不同页面的js中，如新建语句放在原页面，获取语句放在新页面，就可以获取数据了。

案例代码

/**
 * index.js 部分核心代码
 * 保存要传递的数据，点击跳转
 * 页面对应第一张图片
 */
.....
.....
 // 添加点击函数[id, address,time, log,today,yesterday]
        idCell.onclick = function() {
            // 暂存信息到localStorage
            localStorage.setItem('id', this.parentNode.childNodes[0].innerHTML);
            localStorage.setItem('address',this.parentNode.childNodes[1].innerHTML);
            localStorage.setItem('time',this.parentNode.childNodes[2].innerHTML);
            localStorage.setItem('amount',this.parentNode.childNodes[3].innerHTML);
            localStorage.setItem('log',this.parentNode.childNodes[4].innerHTML);
            localStorage.setItem('yesterday',this.parentNode.childNodes[5].innerHTML);
            localStorage.setItem('today',this.parentNode.childNodes[6].innerHTML);
            localStorage.setItem('flag',this.parentNode.childNodes[7].innerHTML);
            // 跳转页面
            window.open("page/detail.html", "_blank");
        }

/** 
 * detail.js
 * 显示详细信息的新页面的js, 对应第二张图片
 */
window.onload = function() {
    // 从localStorge获取数据
    var id = localStorage.getItem('id');
    var address = localStorage.getItem('address');
    var time = localStorage.getItem('time');
    var amount = localStorage.getItem('amount');
    var log = localStorage.getItem('log');
    var yesterday = localStorage.getItem('yesterday');
    var today = localStorage.getItem('today');
    var flag = localStorage.getItem('flag');

    // 显示数据
    $('#id_span').html(id);
    $('#address_span').html(address);
    $('#time_span').html(time);
    $('#amount_span').html(amount);
    $('#flag_span').html(flag);

    //$('#log_span').html(log);
    $('#yesterday_span').html(yesterday);
    $('#today_span').html(today);
}

新窗口打开页面

// 跳转页面 window.open(“url”, “新窗口”);
window.open(“page/detail.html”, “_blank”);