目录
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