小麦博客

本地存储,三兄弟的异同(localStorage、sessionStorage、cookie)

答应我,十二月不准垂头丧气哦,显矮

图片;

共同点

  • localStorage和sessionStorage和cookie共同点


  • 同域(同源策略)限制:同源策略:请求与响应的 协议、域名、端口都相同 则时同源,否则为 跨源/跨域
  • 存储的内容都会转为字符串格式
  • 都有存储大小限制

    localStorage和sessionStorage共同点


  • API相同
  • 存储大小限制一样基本类似
  • 无个数限制

    不同点

    localStorage


  • 没有有效期,除非删除,否则一直存在
  • 同域下页面共享
  • 支持 storage 事件(在某些复杂情况下,如果多个页面都需要访问本地存储的数据,就需要在存储区域的内容发生改变时,能够通知相关的页面);
    // torage 事件
    setTimeout(function(){
       window.localStorage.setItem('a', 2)
     },1000)
    window.addEventListener("storage", function(e) {
       console.log(e)
    });
    

    sessionStorage


  • 浏览器关闭,自动销毁
  • 页面私有
  • 不支持 storage 事件

  • 浏览器也会在每次请求的时候主动组织所有域下的cookie到请求头 cookie 中,发送给服务器端
  • 浏览器会主动存储接收到的 set-cookie 头信息的值
  • 可以设置 http-only 属性为 true 来禁止客户端代码(js)修改该值
  • 可以设置有效期 (默认浏览器关闭自动销毁)(不同浏览器有所不同)
  • 同域下个数有限制,最好不要超过50个(不同浏览器有所不同)
  • 单个cookie内容大小有限制,最好不要超过4000字节(不同浏览器有所不同)
打赏本文
二维码

13

文章

8

标签

 文章分类