LocalStorage、SessionStorage

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()

完整用法

注意点

1. localStorage是html5技术提供的API，html5中新增加的标签,技术(包括promise,localStorage等),统称为html5
2. session是服务器上存的hash，但localStorage实质也是一个hash，只不过是浏览器上的hash
3. localStorage只能存String类型的字符串

clipboard.png

clipboard.png

clipboard.png

存函数会转化成字符串。存对象的时候会变成"[object Object]"，因为({1:'xxx'}).toString()//"[object Object]"

clipboard.png

1. 解决方法：用json来存。例如：localStorage.setItem('jsonString', JSON.stringify({name: 'mtt'}))

clipboard.png

使用注意

localStorage里的数据和js变量有什么区别？

当一个js变量被从新赋值，变量的值当即被改变，但当页面刷新时，变量又回到最初的状态。 而localStorage的变量不存在页面里，windows系统存在客户端本地的C盘的一个文件里。

简单的使用实例

想要只提示用户一次，当下次用户进入这个网站上的时候，不跳出提示框。

<script>
 let already  = localStrorage.getItem('已经提示了')
 if(!already){
    alert('你好，我们的网站即将改版了')
    localStorage.setItem('已经提示了'， true)
 }
</script>

总结

1. LocalStorage 跟 HTTP 无关(而cookie是http的一个头)
2. 发送HTTP请求时 不会带上 LocalStorage 的值
3. 只有相同域名的页面才能互相读取 LocalStorage（没有同源那么严格）
4. 每个域名 localStorage 最大存储量为 5Mb 左右（每个浏览器不一样）
5. 常用场景：记录有没有提示过用户（没有用的信息，不能记录密码）
6. LocalStorage 永久有效，除非用户主动清理缓存

SessionStorage

sessionStorage保存的数据用于浏览器的一次会话（session），当会话结束（通常是窗口关闭），数据被清空；localStorage保存的数据长期存在，下一次访问该网站的时候，网页可以直接读取以前保存的数据。除了保存期限的长短不同，这两个对象的其他方面都一致。

总结：SessionStorage 在用户关闭页面（会话结束）后就失效。其余的和localstorage一样