sessionstorage(会话存储对象)使用、存储、读取、删除（一）

1. 介绍

sessionStorage 是 HTML5 新增的一个会话存储对象，用于临时保存同一窗口 (或标签页) 的数据（key/value），在关闭窗口或标签页之后将会删除这些数据。是 window 下的对象

seesionStorage 只能存储字符串的数据，对于 JS 中常用的数组或对象却不能直接存储，我们可以通过 JSON.stringify()将 json 数据类型转化成字符串，再存储到 storage 中就可以了，获取数据时再使用 JSON.parse()将读取的字符串转换成对象即可。（数组本质上也是对象类型）

2. 特点：

1. 只在本地存储。seesionStorage 的数据不会跟随 HTTP 请求一起发送到服务器，只会在本地生效，并在关闭标签页后清除数据 。
2. 存储方式。seesionStorage 的存储方式采用 key、value 的方式。value 的值必须为字符串类型。
3. 存储上限限制： 不同的浏览器存储的上限也不一样，但大多数浏览器把上限限制在 5MB 以下。
 

3. 操作

存储数据：使用 setItem 或者属性形式

sessionStorage.setItem('a','111');
sessionStorage['a'] ='111';

读取数据：使用 getItem 或者属性形式

sessionStorage.getItem("a")
sessionStorage["a"]

删除数据：使用 removeItem 移除指定的数据 

sessionStorage.removeItem("a");

  删除所有数据

sessionStorage.clear()

进行删除操作之后，再读取数据就会发现该删的已经删了。没有数据的话，读数据会返回 null。

4. 小案例

运行结果：

结尾总结：

存储在 sessionStorage 里面的数据在页面会话结束时会被清除。
页面会话在浏览器打开期间一直保持，并且重新加载或恢复页面仍会保持原来的页面会话。
在新标签或窗口打开一个页面时会复制顶级浏览会话的上下文作为新会话的上下文，这点和 session cookies 的运行方式不同。
打开多个相同的 URL 的 Tabs 页面，会创建各自的 sessionStorage。
关闭对应浏览器 tab，会清除对应的 sessionStorage。

// 保存数据到 sessionStorage
sessionStorage.setItem('key', 'value');

// 从 sessionStorage 获取数据
let data = sessionStorage.getItem('key');

// 从 sessionStorage 删除保存的数据
sessionStorage.removeItem('key');

// 从 sessionStorage 删除所有保存的数据
sessionStorage.clear();