web本地存储

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本地存储