1.localStorage

• 特点:
  • 一旦存储永久存在
  • 只能存基本数据类型(一般存储字符串),不能存储其他数据类型
  • 可以跨页面通讯
    • 两个页面的数据共享,就叫做跨页面通讯
• 常用方法:
  • 增加一条数据
    • 语法:window.localStorage.setItem(key,value)
  • 查找一条数据
    • 语法:window.loaclStorage.getItem(key)
    • 返回值:存在该数据返回对应的值,不存在返回null
  • 删除一条数据
    • 语法:window.localStorage.removeItem(key)
  • 清空存储
    • 语法:window.localStorage.clear()

2.sessionStorage

• 特点:
  • 临时存储,关闭浏览器后,存储内容自动消失
  • 如果是从本页面跳转的页面,可以实现跨页面通讯
• 常用方法:
  • 增加一条数据
    • 语法:window.sessionStorage.setItem(key,value)
  • 查找一条数据
    • 语法:window.sessionStorage.getItem(key)
    • 返回值:存在该数据返回对应的值,不存在返回null
  • 删除一条数据
    • 语法:window.sessionStorage.removeItem(key)
  • 清空存储
    • 语法:window.sessionStorage.clear()

3.cookie

• 特点:
  • 只能存储字符串,并且有固定的格式
    • key = value;
  • 存储大小有限制(大约为4kb)
  • 存储有时效性
    • 默认为会话级别失效,也可手动设置过期时间
  • 操作必须依赖服务器
    • 本地打开的页面不能操作cookie
    • 必须要求页面在服务器打开
  • 跟随前后端请求自动携带
    • 只要cookie空间中有内容时,会在该页面与后端的交互中自动携带
  • 前后端都可操作
    • 前端可以使用JS来操作cookie
    • 任何一个后端语言都可以操作cookie
  • 存储依赖域名
    • 哪一域名存储,哪一域名使用,不能夸域名通讯
• 设置cookie
  • document.cookie = 'key = value'
• 设置带有过期时间的cookie

        var timer = new Date()

        timer.setTime(timer.getTime() - 1000 * 60 * 60 * 8 + 1000 * 3)
        //设置一个3秒后过期的cookie 此时以毫秒为单位计算
        
        document.cookie = 'key = value;expires=' + timer

* 注意: cookie在设置过期时间时,会按照世界标准时间设置,当前我们所在时区为东八区,较于世界标
  准时间快 8 小时,所以在设置cookie的过期时间时需将时间往前调整8小时然后加上过期时间

4.三种方式的区别

4.1 出现时间

cookie:有JS的时候就存在
storage:有H5后才出现

4.2 存储大小

cookie:4k 左右
storage:20 左右

4.3 前后端交互

cookie:会跟随页面的请求自动携带
storage:不会跟随请求自动携带

4.4 过期时间

cookie:默认时会话级别,可以手动设置过期时间
storage:不能手动设置

4.5 前后端操作

cookie:前后端语言都能操作
storage:只能由 JS 操作

4.6 localStorage和sessionStorage的区别

4.6.1 过期时间

localStoage:永久存储,除非手动删除
sessionStorage:临时存储

4.6.2 跨页面通讯

loaclStorage:直接跨页面通讯
sessionStorage:只能时当前页面跳转的页面才能通讯

4.6.3 共同点

只能存储字符串,不能存储复杂数据类型