LocalStorage、SessionStorage

javascript/jquery

浏览数:305

2018-10-18

data-id=”1190000016693768″ data-license=”cc”>

window.sessionStoragewindow.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类型的字符串


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

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

使用注意

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一样

原文地址:https://segmentfault.com/a/1190000016693768