深入理解浏览器存储--Cookie、WebStorage、Ind

Cookie

cookie 的本职工作并非本地存储，而是“维持状态”。cookie指某些网站为了辨别用户身份而储存在用户本地终端上的数据(通常经过加密)。 cookie是服务端生成，客户端进行维护和存储，存储在内存或者磁盘中。通过cookie,可以让服务器知道请求是来源哪个客户端，就可以进行客户端状态的维护，比如登陆后刷新，请求头就会携带登陆时response header中的Set-Cookie,Web服务器接到请求时也能读出cookie的值，根据cookie值的内容就可以判断和恢复一些用户的信息状态。

localStorage和sessionStorage对比

• localStorage是永久存储,下一次访问该网站的时候,网页可以直接读取以前保存的数据,因为localStorage数据被写入磁盘文件中没有过期时间,每次打开浏览器,浏览器会首先从磁盘中读取数据然后缓存起来,Cookie如果设置有效期或过期时间也会被写入磁盘中. sessionStorage是临时存储,会被存储在浏览器缓存中,浏览器关闭就会被清空,Cookie如果没有设置有效期或过期时间也一样
• localStorage和Cookie在所有同源窗口中都是共享的,sessionStorage即便是相同域名下的两个页面只要它们不是在同一个浏览器窗口中打开,那么它们的sessionStorage内容也是无法共享.
• 大小都是5M左右
• 都只能在客户端使用不和服务端进行通信
• 接口封装较好

使用方法

• clear(): 删除所有值
• getItem(name): 根据指定的名字name获取对应的值
• key(index): 在指定的数字位置获取该位置的名字
• removeItem(name): 删除指定name的健值对
• setItem(name, value): 新建一个健值对

localStorage.setItem('name','world'）
localStorage.setItem('gender', true）
localStorage.setItem('num', 0）
var name=localStorage.getItem('name')
var gender=localStorage.getItem('gender')
document.getElementById('name').innerHTML=name
document.getElementById('gender').innerHTML=gender

var obj = { name:'Jim' };
var str = JSON.stringify(obj);
localStorage.setItem('obj', str）
let str1 = localStorage.getItem(obj)
let obj1 = JSON.parse(str)

注意:LocalStorage是永久存储,SessionStorage是临时存储,保存的如果是数组或对象需要先用JSON.stringify转成字符串,取的时候需要用JSON.parse转一下,不管新建的值是数字、布尔值,取出来的都是字符串
WebStorage是对Cookie的拓展,它只能用于存储少量的简单数据,当遇到大规模的、结构复杂的数据时,也会出现问题,所以推出终极解决方案---IndexedDB

IndexedDB

随着浏览器的功能不断增强,越来越多的网站开始考虑,将大量数据存在客户端,这样就可以减少从服务器获取数据,直接从本地获取数据.Cookie大小不超过4kb,WebStorage在2.5mb到10mb之间,而且不提供搜索功能,不能建立自定义的索引,所以需要一种新的解决方案,这就是IndexedDB诞生的背景.
通俗地说,IndexedDB就是浏览器提供的本地数据库,它可以被网页脚本创建和操作. IndexedDB允许存储大量数据提供查找接口,还能建立索引.IndexedDB数据存储在本地磁盘中.

IndexedDB特性

• 键值对存储: IndexedDB内部采用对象仓库存放数据,所有类型的数据都可以直接存入,数据以键值对的形式保存,键是独一无二的,不能有重复,否则会报错.
• 异步: WebStorage是同步执行的,IndexedDB是异步执行,不会阻塞应用程序.
• 支持事务: 只要有一步失败,整个事务都会取消,数据库回滚到事务发生之前的状态,不存在之改写一部分数据的情况.
• 同源限制: 每一个数据库对应创建它的域名,网页只能访问自身域名下的数据库,而不能访问跨域的数据库.
• 存储空间大: IndexedDB的存储空间比WebStorage大得多,理论上来说是没有上限的.
• 支持类型数据: WebStorage只能存储JSON类型数据,但是IndexedDB可以存储所有数据类型包括二进制数据

IndexedDB操作步骤

在IndexedDB大部分操作并不是我们常用的调用方法,返回结果的模式,而是请求---响应的模式.

打开数据库

使用IndexedDB的第一步是打开数据库,使用indexedDB.open()方法

let request = window.indexedDB.open(databaseName, version)

这个方法接受两个参数,第一个参数是字符串,表示数据库的名字,如果指定的数据库不存在就会新建数据库.第二个参数是证书表示数据库的版本,如果省略默认当前版本1. indexedDB.open()方法返回一个IDBRequest对象,这个对象通过三种事件error、success、upgradeneeded处理打开数据库的操作结果.

• error事件: 表示打开数据库失败

request.onerror = function (e) {
   console.log('数据库打开报错')
}

• success事件: 表示成功打开/新建数据库

let db
request.onsuccess = function (e) {
   db = request.result || db = e.target.result
   console.log('数据库打开/新建成功')
}

这时通过request对象的result属性可以拿到数据库对象

• upgradeneeded事件: 如果指定的版本号大于数据库的实际版本号,就会发生数据库升级事件

let db
request.onupgradeneeded = function (e) {
   db = e.target.result
}

这时通过事件对象的target.result属性拿到数据库实例

• 关闭数据库

db.close()

db同上

• 删除数据库

window.indexedDB.deleteDatabase(databaseName)

Cookie、WebStorage、IndexedDB区别

从上表可以看到,Cookie已经不建议用于存储.如果没有大量数据存储需求的话,可以使用localStorage和sessionStorage.

总结

• Cookie的本职工作并非本地存储,而是维持用户会话状态
• WebStorage用于客户端存储少量数据
• IndexedDB用于客户端存储大量结构化数据