浏览器的本地存储（面试必问）

localStorage

浏览器的本地存储，持久存储，一旦存储，永久存在

注意：只能存基本数据类型（一般存储字符串），不能存储其他数据类型

可以跨页面通讯

两个页面得打的数据共享，我们将这种情况叫做跨页面通讯

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

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

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

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

sessionStorage

浏览器的本地存储，临时存储，关闭浏览器以后，存储内容自动消失

想要跨页面通讯，必须是本页面跳转的才可以

    // 1.增  window.sessionStorage.setItem(key, value)
    window.sessionStorage.setItem('wx1', 'QF001')
    window.sessionStorage.setItem('wx2', 'QF002')
    window.sessionStorage.setItem('wx3', 'QF003')

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

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

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

cookie

1.只能存储字符串，并且有固定的格式

key = value ; key2 = value2

2.存储大小有限制（大约是4kb）

3.存储有时效性

默认是会话级别失效（关闭浏览器就失效），但是可以手动设置过期时间

4.操作必须依赖服务器

本地打开的页面不能操作
要求页面必须在服务器打开

5.跟随前后端请求自动携带

只要cookie空间中有内容时，会在该页面和后端交互的过程中自动携带

6.前后端操作

前端可以使用JS来操作cookie
任何一个后端语言都可以操作cookie

7.存储依赖域名

哪一个域名存储，哪一个域名使用
不能跨域名通讯

    // 1.设置cookie
    document.cookie = 'qq=123456'
    // 2.设置一条带有过期时间的 cookie
    // cookie在设置的时候，会按照世界标准时间设置
    // 我们的时区为东八区
    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=123456'

    // 3.设置一个3秒后过期的cookie

    // 因为我们所在的东八区，比世界标准时间快了8小时

    // 所以我们想要设置一个3秒后过期的cookie 必须要将时间往前调整8小时，然后加上过期时间

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

本地存储的区别

cookie 和 storage

1.出现时间

cookie：有JS的时候就存在了
storage：H5出现以后才有

2.存储大小

cookie：4K左右
storage：20M左右

3.前后端交互

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

4.过期时间

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

5.前后端操作

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

localStorage 和 sessionStorage

1.过期时间

localStorage：永久存储，除非手动删除
sessionStorage：临时存储

2.跨页面通讯

localStorage：直接跨页面通讯
sessionStorage：只能是当前窗口（页面）跳转的页面才能通讯

3.共同点

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

JS --- 浏览器的存储