客户端常用的存储方式(二)

小知识，大挑战！本文正在参与“程序员必备小知识”创作活动

Web Storage

sessionStorage 对象只存储会话数据，这意味着数据只会存储到浏览器关闭。这跟浏览器关闭时 会消失的会话cookie 类似。存储在 sessionStorage 中的数据不受页面刷新影响，可以在浏览器崩溃 并重启后恢复。

sessionStorage 对象与服务器会话紧密相关，运行本地文件不能使用。

sessionStorage 对象是 Storage 的实例，可以通过用 setItem()方法或直接给属 性赋值给它添加数据。

// 使用方法存储数据 
sessionStorage.setItem("id", "5"); 
// 使用属性存储数据 
sessionStorage.test = "test";

sessionStorage 上的数据，我们可以使用 getItem()或直接访问属性名来获取。

// 使用方法获取数据 
let id = sessionStorage.getItem("id"); 
// 使用属性获取数据 
let test = sessionStorage.test; 
可以结合 sessionStorage 的 length 属性和 key()方法遍历所有的值： 
for (let i = 0, len = sessionStorage.length; i < len; i++){ 
    let key = sessionStorage.key(i); 
    let value = sessionStorage.getItem(key); 
    console.log(`${key}=`${value}`); 
}

sessionStorage 中删除数据，可以使用 delete 操作符直接删除对象属性，也可以使用 removeItem()方法。

// 使用 delete 删除值 
delete sessionStorage.id; 
// 使用方法删除值 
sessionStorage.removeItem("test"); 

sessionStorage 对象应该主要用于存储只在会话期间有效的小块数据。如果需要跨会话持久存储数据，可以使用globalStorage 或 localStorage。

localStorage 是 Storage 的实例，可以像使用 sessionStorage 一样使用 localStorage。

例如：

// 使用方法存储数据 
localStorage.setItem("id", "1"); 
// 使用属性存储数据 
localStorage.test = "test"; 
// 使用方法取得数据 
let num = localStorage.getItem("num");
// 使用属性取得数据 
let test = localStorage.test;

存储在 localStorage 中的数据会保留到通过 JavaScript 删除或者用户清除浏览器缓存。localStorage 数据不受页面刷新影响，也不会因关闭窗口、标签页或重新启动浏览器而丢失。

当Storage对象发生变化时，会触发storage事件，使用属性或 setItem()设置值、使用 delete 或 removeItem()删除值，以及每次调用 clear()时都会触发这个事件。这个事件的式件对象有如下 4 个属性:

domain：存储变化对应的域。 key：被设置或删除的键。 newValue：键被设置的新值，若键被删除则为 null。 oldValue：键变化之前的值

一般客户端数据的大小限制是按照每个源（协议、域和端口）来设置的，大多数会给给 localStorage 和 sessionStorage限制为每个源5MB。