HTML5 Web存储

1. 概述

1.1 说明

HTML5提供了两种在客户端存储数据的新方法：localStorage和sessionStorage。客户端存储数据的意思就是在本地存储，数据不会跟随HTTP请求一起发送到服务器，只会在本地生效。

注意：不同的网站，数据存储在不同的区域，一个网站只能访问其自身的数据，不会进行穿插访问与操作数据。

1.2 用法

HTML5使用JavaScript来存储和访问数据，即使用JavaScript来操作localStorage和sessionStorage。

调用方式：

• • 使用window对象调用 -- window.localStorage 或 window.sessionStorage
  • 使用自身调用 -- localStorage 或 sessionStorage

1.3 属性

　　length：只读属性，返回一个整数，表示存储在localStorage或sessionStorage对象中的键值对数量。

　　如：sessionStorage.length可以获取在sessionStorage对象中已经存储了的键值对有多少。

1.4 方法

　　setItem(string key,string value)：添加一个键值对到数据存储中；如果键名(key)存在，则更新其对应的值。如sessionStorage.setItem('token','123456')。

　　getItem(string key)：获取存储中键名(key)所对应的值，若没有此键名则返回null。如sessionStorage.getItem('token')。

　　key(int index)：获取在当前存储中的第index序号的键名(key)名称；如果没有此序号则返回null。如sessionStorage.key(1)。

　　removeItem(string key)：将存储中指定的键名(key)移除掉。如sessionStorage.removeItem('token')。

　　clear()：清除存储中所有的键值对项。

 2. localStorage

 2.1 特点

　　2.1.1 存储时间

　　数据存储时间没有限制，即在不手动去除的情况下将永久保存。

　　2.1.2 存储方式

　　localStorage的存储方式采用key、value的方式。value的值限定为字符串类型，传入非字符串时在存储时会转换为字符串(如1会存储为"1")，若需存储json对象则需进行转换(存储时使用JSON.stringify()进行转换为文本，读取时使用JSON.parse()进行转换为对象).

　　注意：localStorage本质上是对字符串的读取，如果存储内容过多的话会消耗内存空间，导致页面卡顿。

　　2.1.3 存储大小

　　不同的浏览器存储大小的上线不同，大多数浏览器把localStorage的上限限制在5MB。可以访问http://dev-test.nemikor.com/web-storage/support-test/测试当前浏览器的存储上限。

　　2.1.4 数据共享

　　localStorage的数据在同一个浏览器的不同标签页中数据是共享的，即在一个标签页中操作了某一个localStorage对象，在另一个标签页中式可以访问到的。

　　注意：localStorage在浏览器的隐私模式下是不可读取的。

2.2 适用场景

• 多页面数据共享
• 数据长久保存，如多语言情况下记录某一选中语言。
• 数据较大的临时保存，如在线编辑文章时的自动保存

2.3 示例

　　2.3.1 存储数据

　　以下三种都是在localStorage中写入键名为token，值为123456的数据存储方式。

 localStorage.setItem('token','123456');
 localStorage['token']='123456';
 localStorage.token='123456';

　　2.3.2 读取数据

　　以下三种都是在localStorage中读取键名为token所对应的值。

 let token=localStorage.getItem('token');
 let token=localStorage['token'];
 let token=localStorage.token;

 3. sessionStorage

3.1 特点

　　3.1.1 存储时间

　　sessionStorage是针对一个session的数据存储，当用户关闭浏览器窗口(标签页)，数据就会被删除，页面刷新时数据不会清除。

　　3.1.2 存储方式

　　同localStorage的存储方式。

　　3.1.3 存储大小

　　同localStorage的存储大小。

　　3.1.4 数据共享

　　sessionStorage有同源策略限制。当页面使用window.open打开页面或使用<a href='xxx' target='_blank'>打开页面都可以获取原有页面中的sessionStorage对象信息。

3.2 适用场景

• 数据临时存储，仅在当前打开页面中活动。

3.3 示例

　　3.3.1 存储数据

　　以下三种都是在sessionStorage中写入键名为token，值为123456的数据存储方式。

 sessionStorage.setItem('token','123456');
 sessionStorage['token']='123456';
 sessionStorage.token='123456';

　　3.3.2 读取数据

　　以下三种都是在sessionStorage中读取键名为token所对应的值。

let token=sessionStorage.getItem('token');
let token=sessionStorage['token'];
let token=sessionStorage.token;