H5 sessionStorage/localStorage详解

一、sessionStorage（会话存储）:

说明：

将数据保存在session对象中（实际项目中用这个比较多，因为页面之间跳转都还是在同一个窗口，数据不会丢失，然而页面关闭后会自动释放，比较符合实际需求）

特点：

1. 用于本地存储一个会话（session）中的数据，这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁。因此sessionStorage不是一种持久化的本地存储，仅仅是会话级别的存储。也就是说只要这个浏览器窗口没有关闭，即使刷新页面或进入同源另一页面，数据仍然存在。关闭窗口后，sessionStorage即被销毁，或者在新窗口打开同源的另一个页面，sessionStorage也是没有的。

二、localStorage(本地存储):

说明：

数据会保存在本地，存储地址一般是本地/计算机名/appdata/local/浏览器专属文件/userData/localStorage中，即使浏览器被关闭了，该数据依然存在，下次打开浏览器访问网站时仍然可以继续使用。但是，数据保存是按不同的浏览器分别进行的，也就是说，如果打开别的浏览器，是读取不到在这个浏览器中保存的数据的。

特点：

1. 持久化的本地存储，除非主动删除数据，否则数据是永远不会过期的。
2. 存储的信息在同一域中是共享的（相同域名、主机名、端口号）。
3. 当本页操作（新增、修改、删除）了localStorage的时候，本页面不会触发storage事件,但是别的页面会触发storage事件。
4. 存储大小据说是5M（跟浏览器厂商有关系）
5. localStorage本质上是对字符串的读取，如果存储内容多的话会消耗内存空间，会导致页面变卡

三、API

以上两者的API一样，所以这里我只说一遍，以localStorage为例

1. localStorage.setItem-存储value

用法： localStorage.setItem(key,value)：将value存储到key字段

2. localStorage.getItem-获取value

用法：localStorage.getItem(key):获取指定key本地存储的值

3. localStorage.removeItem-删除key

用法：localStorage.removeItem(key):删除指定key本地存储的值

4. localStorage.clear()-清除所有的key/value

用法： localStorage.clear(); 针对localStorage，它将删除所有同源的本地存储的数据,而对于Session Storage，它只清空当前会话存储的数据。