客户端存储 (二)localStorage、sessionStroage

141 阅读2分钟

本文已参与「新人创作礼」活动,一起开启掘金创作之路。

前言

上回讲到了cookie在koa和客户端中不同的使用方式,这次记录下localStorage和sessionStorage的使用方式。以及各种本地存储的差异。

知识要点

  • 在koa中cookie的使用方式
  • 客户端cookie的使用方式
  • localStorage及sessionStorage使用
  • 各种本地存储的异同

本地缓存Storage

  • localStorage及sessionStorage使用

    • 设置

      setItem(key, value) 添加或更新(如果数据项中已存在该key)数据项中指定key的value

    • 获取

      getItem(key) 获取数据项中指定key对应的value

    • 移出指定数据

      removeItem(key) 删除数据项中指定key的value

    • 清空所有数据

      clear() 清空所有数据项

###本地存储异同

  • 共同点

  • localStorage和sessionStorage和cookie共同点

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

    • API相同

    • 存储大小限制一样基本类似

    • 无个数限制

  • 不同点

  • localStorage

    • 没有有效期,除非删除,否则一直存在
    • 同域下页面共享
    • 支持 storage 事件
  • sessionStorage

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

    • 浏览器也会在每次请求的时候主动组织所有域下的cookie到请求头 cookie 中,发送给服务器端

    • 浏览器会主动存储接收到的 set-cookie 头信息的值

    • 可以设置 http-only 属性为 true 来禁止客户端代码(js)修改该值

    • 可以设置有效期 (默认浏览器关闭自动销毁)(不同浏览器有所不同)

    • 同域下个数有限制,最好不要超过50个(不同浏览器有所不同)

    • 单个cookie内容大小有限制,最好不要超过4000字节(不同浏览器有所不同)