前言:
Cookie存储数据的功能已经很难满足开发所需,逐渐被WebStorage、IndexedDB所取代;
一、Cookie
什么是Cookie及应用场景
Cookie指网站为了储存一些信息,辨别,记录等,而储存在用户本地的数据;
Cookie一般是服务端生成,客户端进行维护和存储;
Cookie在所有同源窗口中都是共享的。除了保存期限的长短不同;
通过Cookie存储的信息,可以让服务器知道客户端的请求信息,客户端操作状态的维护,例如以前登录过以及登陆后操作等,根据Cookie值的信息就可以判断和恢复一些用户的信息状态;
Cookie以键值对的形式储存
典型的应用场景有:
1、记住密码,下次自动登录;2、购物车功能;3、记录用户浏览数据,进行商品内容推荐;
第一次访问网站的时候,浏览器发出请求,服务器响应请求后,会在响应头里面添加一个Set-Cookie选项,将cookie放入到响应请求中,在浏览器第二次发请求的时候,会通过Cookie请求头部将Cookie信息发送给服务器,服务端会辨别用户身份,另外,Cookie的过期时间、域、路径、有效期、适用站点都可以根据需要来指定。
Cookie的设置:
js中可以通过document.cookie可以读写cookie,以键值对的方式;
document.cookie="userName=hello"
Cookie的获取:
function get_cookie(Name) {
var search = Name + "=" // 查询检索的值
var returnvalue = ""; // 返回值
if (document.cookie.length > 0) {
sd = document.cookie.indexOf(search);
if (sd != -1) {
sd += search.length;
end = document.cookie.indexOf(";", sd);
if (end == -1)
end = document.cookie.length;
// unescape() 函数可对通过 escape() 编码的字符串进行解码。
returnvalue = unescape(document.cookie.substring(sd, end))
}
}
return returnvalue;
}
// 使用方式:
get_cookie("userName");
Cookie的缺陷:储存不够多,性能消耗大,不够安全;
二、Web Storage
HTML5中新增了本地存储的解决方案----Web Storage,它分成两类:sessionStorage和localStorage。这样有了WebStorage后,cookie能只做它应该做的事情了——作为客户端与服务器交互的通道,保持客户端状态,其他的信息交互都可以交给WebStorage。
1、LocalStorage
储存时间:长
储存大小:2.5MB到10MB
储存范围:客户端使用,不和服务端进行通信
易用性:接口封装较好
LocalStorage浏览器本地缓存方案,用来提升网页首屏渲染速度(根据第一请求返回时,将一些不变信息直接存储在本地);下一次访问该网站的时候,网页可以直接读取以前保存的数据;
①、存入数据
// 存入数据使用setItem方法
// 它接受两个参数,第一个是键名,第二个是保存的数据。
// localStorage.setItem("key", "value");
<script>
if(window.localStorage){
localStorage.setItem('name','world')
localStorage.setItem('gender','female')
}
</script>
②、读取数据
// 读取数据使用getItem方法。
// 它只有一个参数,就是键名。
// var valueLocal = localStorage.getItem("key");
var valueLocal = localStorage.getItem("name"));
console.log(valueLocal);
③、使用场景
LocalStorage使用存储方面没有什么特别的限制,本地储存使用为主;
2、SessionStorage
储存时间:会话级别的浏览器存储,一次会话,当该窗口关闭,数据即被清空;
储存大小:2.5MB到10MB
储存范围:客户端使用,不和服务端进行通信
易用性:接口封装较好
注意:即便相同域名下的两个页面,只要不在同一个窗口,那么SessionStorage内容都无法共享;LocalStorage在所有同源窗口中都是共享的;
基于上面的特点,SessionStorage 可以有效对表单信息进行维护,比如刷新时,表单信息不丢失;并且在关闭浏览器后也不会保存;
使用场景
SessionStorage数据的储存是一次性的,仅仅使用在当前页面,开启新的页面之后,释放页面储存的SessionStorage信息;
使用方法
SessionStorage的使用与LocalStorage一样;
三、SessionStorage 、LocalStorage 和 Cookie 之间的区别
共同点
都是保存在浏览器端信息;
不同点
在于生命周期与作用域的不同;
作用域
LocalStorage只要在相同的协议、相同的主机名、相同的端口下,就能读取/修改到同一份LocalStorage数据;
SessionStorage比LocalStorage更严苛一点,除了协议、主机名、端口外,还要求在同一窗口下;
生命周期
LocalStorage是持久化的本地存储,永远不会是失效,使其消失的唯一办法是手动删除;
SessionStorage是临时性的本地存储,它是一次性储存,当窗口页面关闭时,存储信息跟着释放;
---------------------------------------------------------
Web Storage是对Cookie的拓展,它只能用于存储少量的简单数据。
四、IndexedDB
将大量数据储存在客户端,这样可以减少从服务器获取数据,直接从本地获取数据;
1、IndexedDB的特点
键值对储存
IndexedDB 内部采用对象仓库(object store)存放数据。所有类型的数据都可以直接存入,包括 JavaScript 对象。对象仓库中,数据以"键值对"的形式保存,每一个数据记录都有对应的主键,主键是独一无二的,不能有重复,否则会抛出一个错误。
异步
IndexedDB 操作时不会锁死浏览器是异步的,用户依然可以进行其他操作,这与 LocalStorage 形成对比,LocalStorage是同步的。异步设计是为了防止大量数据的读写,拖慢网页的表现。
支持事务
IndexedDB 支持事务(transaction),这意味着一系列操作步骤之中,只要有一步失败,整个事务就都取消,数据库回滚到事务发生之前的状态,不存在只改写一部分数据的情况。
同源限制
IndexedDB 受到同源限制,每一个数据库对应创建它的域名。网页只能访问自身域名下的数据库,而不能访问跨域的数据库。
储存空间大
IndexedDB 的储存空间比 LocalStorage 大得多,一般来说不少于 250MB,甚至没有上限。
支持二进制储存
IndexedDB 不仅可以储存字符串,还可以储存二进制数据(ArrayBuffer 对象和 Blob 对象)。
2、IndexedDB的常见操作
在IndexedDB大部分操作并不是我们常用的调用方法,返回结果的模式,而是请求——响应的模式。
建立打开IndexedDB
window.indexedDB.open("test");
这条指令并不会返回一个DB对象的句柄,我们得到的是一个IDBOpenDBRequest对象,而我们希望得到的DB对象在其result属性中
除了result,IDBOpenDBRequest接口定义了几个重要属性:
onerror:请求失败的回调函数句柄
onsuccess:请求成功的回调函数句柄
onupgradeneeded:请求数据库版本变化句柄
建立:
<script>
var myDB={
name: 'test',
version: '1.0',
db: null
}
function openDB(name) {
// 打开IndexedDB
var request = window.indexedDB.open(name);
request.onerror = function(e) {
console.log('open indexdb error');
}
request.onsuccess = function(e) {
// 这是一个 IDBDatabase对象,这就是IndexedDB对象
myDB.db = e.target.result;
// 此处就可以获取到db实例
console.log(myDB.db);
}
}
openDB(myDB.name);
</script>
控制台得到一个 IDBDatabase 对象,这就是IndexedDB对象;
关闭IndexedDB
// indexdb.close();
function closeDB(db){
db.close();
}
删除IndexedDB
// window.indexedDB.deleteDatabase(indexdb);
function deleteDB(name) {
indexedDB.deleteDatabase(name)
}
区别:
特性 | Cookie | LocalStorage | SessionStorage | IndexDB |
---|---|---|---|---|
生命周期 | 服务器生成,可以设置时间 | 一直储存,只能手动清除 | 窗口关闭即清除 | 除非清理,否则一直在 |
数据储存大小 | 4K | 10M以下 | 10M以下 | 无限制 |
服务端通信 | 会携带header,性能有影响 | 无关 | 无关 | 无关 |
总结:
Cookie主要是“维持状态”;
Web Storage是不参与服务端发生通信,不怎么改变的数据尽量使用LocalStorage存储,一次性的可以用SessionStorage存储;
IndexedDB用于客户端存储大量数据;