Web本地存储
通过本地存储（Local Storage），web 应用程序能够在用户浏览器中对数据进行本地的存储。
在 HTML5 之前，应用程序数据只能存储在 cookie 中，包括每个服务器请求。本地存储则更安全， 并且可在不影响网站性能的前提下将大量数据存储于本地。
与 cookie 不同，存储限制要大得多（至少5MB），并且信息不会被传输到服务器。
本地存储经由起源地（origin）（经由域和协议）。所有页面，从起源地，能够存储和访问相同的数据。
1. Web存储介绍
（1）本地存储，对应 localStorage 对象。用于长期保存网站的数据，并且站内任何页面都可以访问该数据。
（2）会话存储，对应 sessionStorage 对象。用于临时保存针对一个窗口（或标签页）的数据。 在访客关闭窗口或者标签页之前，这些数据是存在的，而关闭之后就会被浏览器删除。
2. 本地存储与会话存储的异同.
（1）本地存储和会话存储的操作代码完全相同，它们的区别仅在于数据的寿命。
（2）本地存储主要用来保存访客将来还能看到的数据。
（3）会话存储则用于保存那些需要从一个页面传递给下一个页面的数据。
3. Web存储容量限制
大多数浏览器都把本地存储限制为 5MB 以下。
4. 实例
（1）文本数据的保存和读取
localStorage.setItem("user_name","hangge.com");
var userName = localStorage.getItem("user_name");
（2）数值的保存和读取
localStorage.setItem("user_age",100);
var userAge = Number(localStorage.getItem("user_age"));
（3）日期的保存和读取
//创建日期对象
var today = new Date();
//按照YYY/MM/DD的标准格式把日期转换成文本字符串，然后保存为文本
var todayString = today.getFullYear() + "/" + today.getMonth() + "/" + today.getDate();
localStorage.setItem("session_started", todayString);
//取得日期文本，并基于该文本创建新的日期对象
var newToday = new Date(localStorage.getItem("session_started"));
alert(newToday.getFullYear());
（4）自定义对象的保存和读取
//自定义一个User对象
function User(n, a, t) {
this.name = n;
this.age = a;
this.telephone = t;
}
//创建User对象
var user = new User("hangge", 100, "123456");
//将其保存为方便的JSON格式
sessionStorage.setItem("user", JSON.stringify(user));
//跳转页面
//window.location = "hangge.html";
//将JSON文本转回原来的对象
var user2 = JSON.parse(sessionStorage.getItem("user"));
alert(user2.name);
（5）检测某个键的值是否为空，可以直接测试是否等于null
if(localStorage.getItem("user_name") == null){
alert("用户名不存在！");
}
（6）删除数据项
localStorage.removeItem("user_name");
（7）清除所有数据
localStorage.clear();
storage事件
HTML5 还为我们带来了和 Storage 相关的事件。事件发生有两个条件：
1. localStorage 的内容被改变；
2. 改变发生在另一个网页中（很多人都忽略了这个条件）。
window.addEventListener('storage', function(e) {
var key = e.key;
var old_value = e.oldValue;
var new_value = e.newValue;
var url = e.url;
}, false);
参考链接：多个标签之间共享sessionStorage
web本地存储