临时本地存储与coolie

sessionStorage

• 也是浏览器本地存储的一种方案, 是临时存储, 当浏览器关闭的时候, 存储的内容, 自动清空
• 跨页面通讯 必须是从当前页面跳转过去的页面才能实现通讯

       // 增
       window.sessionStorage.setItem('wx1', '123456')
       window.sessionStorage.setItem('wx2', 'qwerqwer')
       window.sessionStorage.setItem('wx3', '@#$%^')
       window.sessionStorage.setItem('wx4', '2310')

       // 查
       var wx = window.sessionStorage.getItem('wx')
       console.log(wx)

       // 删除
       window.sessionStorage.removeItem('wx')

       // 清空
        window.sessionStorage.clear()

cookie

• 1. 只能存储字符串, 并且有自己固定的格式 key=value; key2=value2; key3=value3
• 2. 存储大小有限制 4kb 左右
• 3. 存储具有时效性

•    默认是会话级(sessionStorage), 但是我们也可以指定过期时间  
  

• 4. 操作必须依赖服务器

•      目前可以借助 liveserver 启动页面, 不要本地的方式启动   
  

• 5. 前端后通讯的时候 会自动携带 cookie

•      前端向后端发起请求的时候, 会自动把 cookie 内部存储的数据 发送给后端
  

• 6. 前后端语言都可以操作
• 7. 存储依赖域名, 同一个域名内可以通讯, 否则不行

/ 设置一条 cookie
        // document.cookie = 'qq=666666'
        // document.cookie = 'wx=88888888'
        // // 获取 cookie
        // console.log(document.cookie)   

• 可以设置cookie的过期时间

  • document.cookie = 'b=222;expires=' + time

本地存储之间的区别

1. 出现时间
   • cookie 有 JS 的时候就有了
   • storage 有 H5 的时候才有的
2. 存储大小
   • cookie 4kb左右
   • storage 4mb-20mb
3. 前后端交互
   • cookie 交互时会自动传递给后端
   • storage 交互时不会自动传递给后端, 除非手动携带
4. 前后端操作
   • cookie 前后端语言都可以操作
   • storage 只能前端语言操作
5. 过期时间
   • cookie 可以手动指定过期时间, 也有默认的过期时间
   • storage 没有过期时间

• 两个 storage 之间的区别
  • localStorage
    • 过期时间: 持久化存储, 除非手动删除
    • 跨页面通讯: 能够完成
  • sessionStorage
    • 过期时间: 临时存储, 关闭浏览器的时候数据就会被清空
    • 跨页面通讯: 只有从当前页面跳转过去的页面才能完成
• 两个 storage 的共同点
  • 都必须存储字符串
  • 存储其他数据类型的时候, 需要借助 JSON 的方法进行一个转换