共计 1308 个字符，预计需要花费 4 分钟才能阅读完成。
window.sessionStorage 和 window.localStorage 接口用于脚本在浏览器保存数据。
LocalStorage
基本使用
设置
window.sessionStorage.setItem(‘key’, ‘value’);
window.localStorage.setItem(‘key’, ‘value’);
获取
window.sessionStorage.getItem(‘key’)
window.localStorage.getItem(‘key’)
清除
localStorage.removeItem(‘key’);
window.localStorage.clear()
完整用法
注意点
localStorage 是 html5 技术提供的 API，html5 中新增加的标签, 技术 (包括 promise,localStorage 等), 统称为 html5
session 是服务器上存的 hash，但 localStorage 实质也是一个 hash，只不过是浏览器上的 hash
localStorage 只能存 String 类型的字符串
存函数会转化成字符串。存对象的时候会变成 ”[object Object]”，因为 ({1:’xxx’}).toString()//”[object Object]”
解决方法：用 json 来存。例如：localStorage.setItem(‘jsonString’, JSON.stringify({name: ‘mtt’}))
使用注意
localStorage 里的数据和 js 变量有什么区别？
当一个 js 变量被从新赋值，变量的值当即被改变，但当页面刷新时，变量又回到最初的状态。而 localStorage 的变量不存在页面里，windows 系统存在客户端本地的 C 盘的一个文件里。
简单的使用实例
想要只提示用户一次，当下次用户进入这个网站上的时候，不跳出提示框。
<script>
let already = localStrorage.getItem(‘ 已经提示了 ’)
if(!already){
alert(‘ 你好，我们的网站即将改版了 ’)
localStorage.setItrm(‘ 已经提示了 ’，true)
}
</script>
总结
LocalStorage 跟 HTTP 无关 (而 cookie 是 http 的一个头)
发送 HTTP 请求时 不会带上 LocalStorage 的值
只有相同域名的页面才能互相读取 LocalStorage（没有同源那么严格）
每个域名 localStorage 最大存储量为 5Mb 左右（每个浏览器不一样）
常用场景：记录有没有提示过用户（没有用的信息，不能记录密码）
LocalStorage 永久有效，除非用户主动清理缓存
SessionStorage
sessionStorage 保存的数据用于浏览器的一次会话（session），当会话结束（通常是窗口关闭），数据被清空；localStorage 保存的数据长期存在，下一次访问该网站的时候，网页可以直接读取以前保存的数据。除了保存期限的长短不同，这两个对象的其他方面都一致。
总结：SessionStorage 在用户关闭页面（会话结束）后就失效。其余的和 localstorage 一样
