一.localStorage

• 浏览器的本地存储,持久存储, 一旦存储永久存在
• 只能存基本数据类型(一般存储字符串),不能存储其它数据类型
• 可跨页面通讯:两个页面得到了数据共享,我们将这种情况叫做 跨页面通讯

1.1 localStorage 进行增加操作

    //1.增  window.localStorage.setItem(key,value)
    window.localStorage.setItem('qq1','88888888')
    window.localStorage.setItem('qq2','66666666')

1.2 localStorage 进行查找操作

    //2.查  window.localStorage.getItem(key)
    var qq1 = window.localStorage.getItem('qq1')
    var pw = window.localStorage.getItem('password') // 因为没有对应的key,所以获取到的值为 null
    console.log(qq

1.3 localStorage 进行删除一条的操作

   //3.删除一条  window.localStorage.removeItem(key) 
    window.localStorage.removeItem('qq1')

1.4 localStorage 进行清空的操作

    //4.清空
    window.localStorage.clear()

二.sessionStorage

• 浏览器的本地存储,临时存储,关闭浏览器以后,存储内容自动消失
• 想要跨页面通讯,必须是本页面跳转的

2.1 sessionStorage进行增加操作

    //1.增  window.sessionStorage.setItem(key,value)
    window.sessionStorage.setItem('wx1','gjx0412')
    window.sessionStorage.setItem('wx2','gjx0515')
    window.sessionStorage.setItem('wx3','gjx0000')

2.2 sessionStorage进行查找操作

    //2.查
    var wx1 = window.sessionStorage.getItem('wx1')
    console.log(wx1)
    var phoneNum = window.sessionStorage.getItem('pNum') // 因为没有对应的key,所以获取到的值为null
    console.log(phoneNum) //null

2.3 sessionStorage进行删除一条的操作

    //3.删除一条
    window.sessionStorage.removeItem('wx3')

2.4 sessionStorage进行清空的操作

    //4.清空
    window.sessionStorage.clear()

三.cookie

3.1 cookie的注意事项

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

3.2设置并且使用cookie

    //1.设置一个cookie
    document.cookie = 'QQ=123456'

    //2.设置一条带有过期时间的cookie
    /**
     * 注意:cookie 在设置的时候,会按照世界标准时间设置
     *     我们的时区为东八区
    */
    var timer = new Date()
    document.cookie = 'QQ=123456;expires=' + timer

    //3.设置一个 3 秒后过期的cookie
    /**
     * 因为我们所在的东八区比世界标准时间快了8小时
     * 所以我们想要设置一个 3 秒后过期的cookie 必须将时间往前调8小时,然后加上过期时间
    */

    var timer = new Date()
    timer.setTime(timer.getTime() - 1000 * 60 * 60 * 8 + 1000 * 3)
    document.cookie = 'QQ=123456;expires=' + timer
    document.cookie = 'wx1=654321'
    document.cookie = 'wx2=gjx0412'

    //4.获取cookie
    console.log(document.cookie)
    setTimeout(function(){
      console.log(document.cookie)
    },5000)

四.本地存储的区别(重点)

1. 出现时间
   • cookie: 有JS 的时候就存在了
   • storage: H5 出现以后才有(这里把localStorage和sessionStorage简称为storage)
2. 存储大小
   • cookie: 4k左右
   • storage: 20M 左右
3. 前后端交互
   • cookie: 会跟随页面的请求自动携带
   • storage: 不会跟随请求自动携带
4. 过期时间
   • cookie: 默认是会话级别,可以手动设置过期时间
   • storage: 不能手动设置
5. 前后端操作
   • cookie: 前后端语言都能操作
   • storage:只能由 JS 操作
6. localStorage 和 sessionStorage

• 过期时间:
  • local: 永久存储,除非手动删除
  • session:临时存储
• 跨页面通讯
  • local: 直接跨页面通讯
  • session:只能是当前窗口(页面)跳转的页面才能通讯
• 共同点:只能存储字符串,不能存储复杂数据类型