浏览器缓存--cookie、sessionStorage、localStorage、indexedDB

浏览器缓存–cookie、sessionStorage、localStorage、indexedDB

cookie

最初用于在客户端存储会话信息

服务器在响应 HTTP 请求时，向客户端发送 Set-cookie HTTP头部包含会话信息，浏览器回存储这些会话信息（存在客户端本地），并且在之后同域名，而且符合 path 要求的每个请求中都会通过HTTP头部cookie将他发回服务器

Cookie的仅作用范围最主要由和 domain 域名和 path 路径限定，与协议和端口无关

会话存储：

特定域绑定，设置cookie后，他会与请求一起发送到创建它的域

一些限制：每个域不超过20个cookie，浏览器不超过300个cookie,每个cookie不超过4096个字节……

的过期时间由客户端设置。若不设置过期时间，则表示这个 cookie`的生命期为浏览器会话期间，关闭浏览器窗口， cookie 就会消失

构成：

1）名称name：不分大小写，必须经过URL编码

2）值：存在cookie中的字符串值，这个值必须经过URL编码

3）域：发送到这个域的请求都会带上cookie

4）路径：请求路径包含这个路径才会把cookie发送到服务器

5）过期时间：表示合适删除cookie的时间戳，默认情况下浏览器会话结束就会删除所有cookie,不过也可以自己设置 一个过期时间，这样即使关闭浏览器，时间到了cookie也会被删除

6）安全标志：只有使用功能SSL安全链接的情况下才会把cookie发送到服务器

Set-Cookie:name=value,expires=Mon,22-Jan-07 07:10:24 GMT;domains=.wrox.com;secure
1

cookie叫做name的cookie,Mon,22-Jan-07 07:10:24过期，.wrox.com及其他子域携带cookie,SSL连接才随请求发送到服务器

实际上发送给服务器的只有cookie的 名/值 对

document.cookie  // 获取页面中所有有效的cookie字符串

document.cookie=encodeURIComponent("name") + "=" + encodeURIComponent("Nicholas") + "; domain=.wrox.com;secure"  // 设置cookie
1
2
3

不要在cookie中存储重要或敏感信息

web Storage

只能存储字符串，所以非字符串需要转为字符串，最常用 JSON.stringify()

sessionStorage

会话存储机制

特点：

1》存储位置：将数据保存在session对象中

2》时效性：从进入网站到关闭窗口（从开始会话到结束会话）期间有效（临时保存）；页面关闭消失，但是不受页面刷新影响

3》共享限制：前提是同源，同一个会话及这个会话的跳转，打开新页面（同一个会话，不受标签页的影响，路由切换也是没有关系，甚至windo.open开一个新页面，html变了也没有关系，单页面用得多一些）；如果直接复制地址，新开一个标签页打开是没有的，只要当前会话打开或跳转一个同源的页面就能拿到

4》存储大小是由限制的，比cookie大，比localStorage小，5M左右

增删改查的api

// 获取
sessionStorage.getItem(key)
sessionStorage.key
// 添加设置、修改
sessionStorage.setItem(key,value)
sesisonStoreage.key=value
// 删除
sessionStorage.removeItem(key)
delete sessionStorage.key
sessionStorage.clear()
1
2
3
4
5
6
7
8
9
10

注意事项：理论上是同源就共享，但也可能出现没有共享的情况

1》使用window.open()打开同源url,sessionStorage仍然共享

      window.open("http://localhost:8080/index.html");
1

2》a标签打开新页面

    
1

发现新开的页面，sessionStorage并没能共享过来

解决方法：加上 rel=“opener”

    打开新的tab标签页
1
2
3

rel：规定当前文档与目标 URL 之间的关系。仅在 href 属性存在时使用

3》如果你直接打开一个同源新的tab页面，就算是同源也是无法共享sessionStorage

即使是同一个地址，同一个路由都不行

4》使用vue-router跳转，当前页面内部的跳转肯定可以共享

localStorage

永久存储机制

特点:

1》存储位置：将数据保存在客户端本地硬件设备中（通常指硬盘，也可以时其他应键设备中）

2》时效性：浏览器关闭，改数据依然存在（永久保存）设置手动清除才清除

3》共享限制：前提是同源，不同标签页、不同窗口可以访问，但是跨域和跨浏览器不能访问到（也就是在打开页面之后对当前标签页的数据进行一些增删改，同浏览器同源的数据都会发生变化）

4》存储大小相对来说比较大

增删改查的api

// 获取
localStorage.getItem(key)
localStorage.key
// 添加设置、修改
localStorage.setItem(key,value)
localStorage.key=value
// 删除
localStorage.removeItem(key)
delete localStorage.key
localStorage.clear()
1
2
3
4
5
6
7
8
9
10

监视storage中的数据

存储事件storage,每次使用setItem delete removeItem clear 都会触发这个事件

window.addEventListener("storage",e=>{
console.log("存储变化对应的域:", e.domain,"被设置或删除的值:",e.key,
"键被设置的新值 删除为null", e.newValue, 键变化之前的值 e.oldValue)
})
1
2
3
4

同源同浏览器同窗口，打开两个标签页，修改一个的localStorage,另一个就能监听到变化

      window.addEventListener(
        'storage',
        event => {
          console.log('监听到localStorage中的值发生了变化')
          console.log(event) //常用的属性event.key event.url event.newValue event.oldValue
        },
        false
      )
      document.querySelector('#btn').addEventListener('click', () => {
        localStorage.setItem('test', '72变')
      })
1
2
3
4
5
6
7
8
9
10
11

修改setItem方法，让本页面能够监听到变化（其他页面监听不到）

      var orignalSetItem = localStorage.setItem
      localStorage.setItem = function(key, newValue) {
        var setItemEvent = new Event('setItemEvent')
        setItemEvent.newValue = newValue
        window.dispatchEvent(setItemEvent)
        orignalSetItem.apply(this, arguments)
      }
      window.addEventListener('setItemEvent', function(e) {
        alert(e.newValue)
      })
      document.querySelector('#btn').addEventListener('click', () => {
        localStorage.setItem('test', 'samePage')
      })
1
2
3
4
5
6
7
8
9
10
11
12
13

cookie、sessionStorage、localStorage三者对比

不同点

cookie

1 存储数量据小
2 在设置的期限到达之前有效，及时关闭浏览器*
3 在同一浏览器的所有同域名且路径符合要求的窗口共享 （前提是cookie的domain、path、ssl 满足要求），即使页面不同也可以拿到；不同浏览器安全问题肯定是不能共享啦
4 cookie数据始终在符合要求的http请求中携带（即使不需要），即cookie在浏览器和服务器间来回传递

sessionStorage
1 存储数据量较大
2 当前浏览器关闭之前有效
3 只在当前浏览器的当前会话共享 ，即使是同一浏览器，不同会话也不能共享cookie
4 sessionStorage不会自动把数据发送给服务器，仅在本地保存

localStorage
1 存储数据量大
2 除非自己删除，否则一直有效，即使浏览器关闭
3 在当前浏览器所有同源窗口共享*
4 localStorage不会自动把数据发送给服务器，仅在本地保存

相同点

都可以用来存储数据，且都保存在客户端（浏览器）

IndexedDB

结构化数据存储机制

IndexedDB设计几乎完全是异步的，所以大多操作以请求的形式执行

与传统数据库不同的是，使用对象存储而不是表格保存数据

浏览器可能对indexDB有50M大小的限制

1、使用indexedDB.open打开数据库，建立连接

let db,request,version=1
request=indexedDB.open("admin",version) // 版本为整数
request.onerror=event=>console.log("失败"，event.target.errorCode)
request.onsuccess=event=>db=event.target.result
1
2
3
4

2、存储对象数据

request.onupgradeneeded=event=>{
const db=event.target.result
  if(db.bojectStoreNames.contains("users")){
    db.deleteObjectStore("users")
  }
db.createObjectSyore("users",{keyPath:"username"})
}
1
2
3
4
5
6
7

3、通过事物操作数据

let transaction=db.transaction("users")
transaction.onerror=e=>console.log(e)
transaction.onsuccess=e=>console.log(e)
1
2
3