1.本地存储类型

1.1localStorage

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

只能存基本数据类型(一般存储字符串), 不能存储其他数据类型

可以跨页面通讯

两个页面得到了数据共享, 我们将这种情况叫做跨页面通讯

增

 window.localStorage.setItem(key, value)
 window.localStorage.setItem('qq1', 'QF001')
 window.localStorage.setItem('qq2', '66666666')

查

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

删除一条

 window.localStorage.removeItem(key)
 window.localStorage.removeItem('qq1')

清空
```
 window.localStorage.clear()
```

1.2sessionStorage

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

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

增

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

查

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

删除一条

 window.sessionStorage.removeItem('wx3')

清空
```
 window.sessionStorage.clear()
```

1.3cookie

1.3.1 只能存储字符串, 并且有固定的格式

key=value;key2=value2

1.3.2 存储大小有限制 (大约是 4kb)

1.3.3 存储有时效性

默认是会话级别失效, 但是可以手动设置过期时间

1.3.4 操作必须依赖服务器

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

1.3.5 跟随前后端请求自动携带

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

1.3.6 前后端操作

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

1.3.7 存储依赖域名

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

设置 cookie
```
 document.cookie = 'QQ=123456'
```
设置一条带有过期时间的 cookie cookie 在设置的时候, 会按照世界标准时间设置我们的时区为东八区
```
 var timer = new Date()
 document.cookie = 'QQ=123456;expires=' + timer
```
设置一个 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=qwerty'

4. 获取 cookie

    setTimeout(function () {
        console.log(document.cookie)
    }, 5000)

2.本地存储的区别

2.1 出现时间

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

2.2 存储大小

cookie: 4k 左右
storage: 20M 左右

2.3 前后端交互

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

2.4 过期时间

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

2.5 前后端操作

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

localStorage 和 sessionStorage区别

1. 过期时间

local: 永久存储, 除非手动删除
session: 临时存储

2. 跨页面通讯

local: 直接跨页面通讯
session: 只能是当前窗口(页面) 跳转的页面才能通讯

3. 共同点

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

有关本地存储