【网络】理解LocalStorage和SessionStorage区别与用法

一、简介

localStorage和sessionStorage 是 HTML5 提供的两个本地存储 API，本质上是一个hash表，主要是解决了cookie 存储空间不足（4KB）的问题。

二、相同点

1、数据仅在客户端保存，不会随着http请求发送给服务器。
2、都有同源策略，相同域名才能相互读取数据。
3、存储大小一般均为5M左右，超出存储量会拒绝。
4、常用于记录一些不敏感信息。
5、以 key 和 value 的形式进行存储数据， value 值必须为字符串，不为字符串会自动转换( value 如果是对象则需要转为 json 进行存储。

三、不同点

1、生命周期

localStorage 生命周期是永久，除非用户手动清除在浏览器ocalStorage信息。

sessionStorage 仅在当前回话有效，关闭窗口或浏览器后被清除。

2、作用域

localStorage: 在同一个浏览器内，同源文档之间共享 localStorage 数据，可以互相读取、覆盖、清除 (同浏览器限制、同源限制)

sessionStorage: 只有同一浏览器、同一窗口的同源文档才能共享数据 (同浏览器限制、同源限制、同标签页限制)

四、API

localStorage和sessionStorage使用时使用相同的API：

localStorage.setItem("key","value")
// 以key为名称存储一个值value
localStorage.getItem("key")
// 获取名称为key的值
localStorage.removeItem("key")
// 删除名称为key的信息
localStorage.clear();
// 清除当前作用域下所有数据