各种常用存储的storage（cookie localStorage sessionStorage indexedDB）

目录

1.详解cookie

1.1cookie的一些操作

1.2cookie的一些特点

2.详解sessionStorage

2.1sessionStorage的特点

2.2sessionStorage的操作

3.详解localStorage

4.详解indexedDB

4.1创建数据库

4.2创建对象仓库

4.3对象仓库的操作

4.4游标cursor

1.详解cookie

HTTP协议是无状态的协议。一旦数据交换完毕，客户端与服务器端的连接就会关闭，再次交换数据需要建立新的连接。这就意味着服务器无法从连接上跟踪会话；服务端如果需要记录用户的状态，就使用response向客 户端浏览器颁发一个Cookie。客户端浏览器会把Cookie保存起来。当浏览器再请求该网站时，浏览器把请求的网址连同该Cookie一同提交给服务 器。服务器检查该Cookie，以此来辨认用户状态。服务器还可以根据需要修改Cookie的内容

1.1cookie的一些操作

document.cookie //获取cookiedocument.cookie = "key=value" //添加cookie//每个cookie都是由key=value组成的一个字符串，用逗号隔开的//获取cookie里面的每个属性，返回一个对象function getKeyAndValueObj(str) {let result, obj = {},reg = /[;\s]?(\w+)=([\w\.#]+)/g;while((result = reg.exec(reg)) != null) {let key = result[1];let value = encodeURIComponent(result[2])obj[key] = value}return obj}getKeyAndValueObj(document.cookie)

1.2cookie的一些特点

（1）存储大小不超过4kb

（2）cookie会与服务器通信，将Http协议变为有状态的连接；提供客户端与服务端通信；并在每次请求时，携带在请求头上

（3）cookie一般没有设置有效期，会在会话结束后；自动清除；若设置了有效期；

1.通过expire设置过期时间；此时的date时格林日期格式

let _date = new Date() //获取当前时间_date.setDate(_date.getDate() + 5) //当前时间的天数加5天，作为目标时间let _ = _date.toGMTString() //转化为格林日期格式document.cookie = "name=caicaizi, expires=_" //设置一个name=caicaizi的属性；过期时间为当前日期加5

2.通过Max-Age来设置有效期，此时为秒数

document.cookie = "name=lili, Max-Age=60" //60秒后过期

（4）cookie只能存储字符串类型

（5）cookie具有不可跨域名性

（6）设置httpOnly属性，为true，不能通过js的document.cookie去获取，

（7）设置secure属性，为true，只能在https协议中携带cookie，为false，https和http都可以携带cookie

2.详解sessionStorage

sessionStorage的生命周期是仅在当前会话下生效，sessionStorage引入了一个“浏览器窗口”的概念，sessionStorage是在同源的窗口中始终存在的数据。只要这个浏览器窗口没有关闭，即使刷新页面或者进入同源另一个页面，数据依然存在。但是sessionStorage在关闭了浏览器窗口后就会被销毁。同时独立的打开同一个窗口同一个页面，sessionStorage也是不一样的；

2.1sessionStorage的特点

（1）页面会话在浏览器打开期间始终保持，页面刷新、重新加载或者回复都会保持原来的会话

（2）在新标签或窗口打开一个页面时，会复制顶级会话的session上下文，作为新的会话的上下文，即通过open，标签_blank，location.href打开的新窗口，会复制父窗口的session，但是子窗口的session不能在父窗口获取

（3）打开多个相同的url或者浏览器tab标签栏，每个窗口的session不共享

（4）浏览器关闭后，session会清除

（5）session的存储大小为5MB

（6）同源限制：必须协议、域名、端口都相同，才能共用。

2.2sessionStorage的操作

sessionStorage.setItem("name", "caicaizi") //设置sessionlet session = sessionStorage.getItem("name") //获取sessionStorage.removeItem("name") //清除sessionStorage.clear() //清除所有的session

3.详解localStorage

localStorage基本同sessionStorage一样，只是localStorage时永久存储；浏览器关闭后，不会被清除

4.详解indexedDB

indexedDB内部采用对象仓库（objectStore）存放数据。所有类型的数据都可以直接存入，包括JavaScript对象。在对象仓库中，数据以“键值对”的形式保存，每一个数据都有对应的键名，键名是不能重复，否则会抛出一个错误。

indexedDB操作时不会锁死浏览器，用户依然可以进行其他操作，

indexedDB支持事务（transaction），这意味着一系列操作步骤之中，只要有一步失败，整个事务就都取消，数据库回到事务发生之前的状态，不存在只改写一部分数据的情况。

每一个数据库对应创建该数据库的域名。来自不同域名的网页，只能访问自身域名下的数据库，而不能访问其他域名下的数据库。

4.1创建数据库

window.indexedDB = window.indexedDB || window.webkitIndexedDB //兼容低版本chrome浏览器var request = window.indexedDB.open(name, version)var db;request.onupgradeneeded = (e) => { //更新数据库时触发}reeust.onsuccess = (e) => { //创建成功触发db = e.target.result}request.onerror = (e) => { //失败时触发}

1.window.indexedDB.open()有2个参数，第一个是数据库名字，第二个是版本，open方法若数据库存在，则打开该数据库，不存在，则创建一个

2.第一次打开数据库时获取更改版本号时，会触发onupgradeneeded函数，然后再触发success

3.回调函数接受一个事件对象event作为参数，它的target.result属性就指向打开的IndexedDB数据库。

4.数据库的version只能升，不能降，一个数据库，只能有一个版本，不能同时存在多个

4.2创建对象仓库

db = e.target.result //一个数据库var data = [ //测试数据{ id: "c1", name: "菜菜子", email: "1212@", age: "18" },{ id: "c2", name: "肖", email: "1213@", age: "20" },]if (!db.objectStoreNames.contains("customer")) { //判断对象仓库存在不var objectStore = db.createObjectStore("customer", { keyPath: "id", autoIncrement: true }) //创建一个对象仓库, 键为id, 自动递增if(objectStore.indexNames.contains("name")) { //存在indexobjectStore.deleteIndex("name") //删除index}objectStore.createIndex("name", "name", { unique: false }) //名字可以重复objectStore.createIndex("email", "email", { unique: true }) // 邮箱不能重复objectStore.transaction.oncomplete = (e) => { //确保对象仓库创建完成var customerObject = db.transaction("customer", "readwrite").objectStore("customer") //创建事务//数据保存到新建的对象仓库data.forEach((item) => {customerObject.add(item)})}}

1.db.objectStoreNames.contains 用于判断仓库是否存在

2.对象仓库的实例方法objectStore.indexNames.contains用于处理创建的index

3.对象仓库一旦创建成功，则不允许修改，除非更改版本号

4.3对象仓库的操作

let db = e.target.result.transaction(["customer"], "readwrite"); //创建一个可读写事务let store = db.objectStore("customer") //获取对象仓库store.add({ name:"test", age: 12, email: "11@", id: "c3" })

1.transaction是数据库的事务，有2个参数，

（1）第一个参数是数组，表示对象仓库

（2）第二个参数是操作类型，readonly(只读)，readwrite(读写)

（3）transaction有三个方法来处理事务：abort: 事务中断; complete: 事务完成; error: 事务出错

2.对象仓库的方法

添加：add

修改：put

删除：delete

获取：get

清除所有：clear

4.4游标cursor

let res = store.openCursor(); //打开游标let result = [];res.onsuccess = (e) => {let cursor = e.target.result;if(cursor) {result.push(cursor.value);cursor.continue()} else {console.log("数据", result);}}db.oncomplete = () => {}

1.openCursor打开一个游标，注意：存储数据的数组，必须定义在onsuccess的最外层；

2.游标本质上是一个迭代器，也就意味着有类似于 next 的方法，可以用来移动游标到下一个位置，有 value 属性用来读取当前值

3.continue滑动至下一条记录，当遍历结束后，会返回undefined