文章目录
1.总结
浏览器的本地存储方式有以下三种:
-
cookie:服务器为了标示用户身份而储存在用户本地终端(Client Side)上的数据(通常经过加密)。
-
Web storage API
获取window.sessionStorage和window.localStorage
- localStorage 用于长久保存整个网站的数据,保存的数据没有过期时间,直到手动去删除。
- sessionStorage 用于临时保存同一窗口(或标签页)的数据,在关闭窗口或标签页之后将会删除这些数据。
-
IndexedDB
浏览器提供的本地数据库,它可以被网页脚本创建和操作。IndexedDB 允许储存大量数据,提供查找接口,还能建立索引。
2.cookie
cookie:服务器为了标示用户身份而储存在用户本地终端(Client Side)上的数据(通常经过加密)。
cookie
的具体实现过程:
- 当用户访问
web
服务器后,web
服务器会获取用户的状态并且返回一些数据(cookie)给浏览器,浏览器会自动储存这些数据(cookie)。 - 当用户再次访问web服务器,浏览器会把cookie放到请求报文中发送给web服务器,web服务器就会获取到了用户的状态。
- 基于这次用户的状态方便用户进行其他业务的访问,并且web服务器可以设置浏览器保存cookie的时间,cookie是有域名的概念,只有访问同一个域名的时候才会把之前相同域名返回的cookie携带给该web服务器。
关键点:
web
通讯一般基于HTTP
协议,HTTP
是无状态协议。Cookie
技术是用来保持web
访问状态,Cookie
技术通过在请求和响应报文中添加Cookie
数据来保存客户端的状态信息- 服务器可以设置
cookie
的有效期,浏览器会自动清除过期的cookie
。 cookie
有域名的概念,只有访问同一个域名,才会把之前相同域名返回的cookie携带给该服务器。
2.1 设置cookie
内置的Response
类提供的set_cookie()
方法。
属性 | 说明 |
---|---|
key | cookie 的键(名称) |
value | cookie 的值 |
max_age | cookie 被保存的时间数,单位为秒。 |
expires | 具体的过期时间,一个datetime 对象或UNIX时间戳 |
path | 限制cookie 只在给定的路径可用,默认为整个域名下路径都可用 |
domain | 设置cookie 可用的域名,默认是当前域名,子域名需要利用通配符domain=.当前域名 |
secure | 如果设为True ,只有通过HTTPS 才可以用 |
httponly | 如果设为True ,进制客户端JavaScript 获取cookie |
2.2 cookie的有效期
默认情况下,Cookie 的生命周期就是浏览器的会话周期,即用户关闭浏览器后,Cookie 就会失效。
-
设置关键字实参max_age,表示过了多少秒之后过期
-
expires参数代表过期时间,是绝对是件
2.3 JS操作cookie
-
document.cookie
获取得到cookie字符串,cookie都是键值对形式,得到的字符串为key=value形式,多个键值对之间用分号(;)拼接
2.3.1 设置cookie
-
直接设置
document.cookie="name=value;expires=GMT_String";
-
函数形式
给cookie赋值name,value,days,所对应的含义是名,值,过期时间(相对时间)。
注意绝对时间是格林威治时间,使用toGMTString()方法将Date对象转换为格林威治时间。function setcookie(name,value,days){ // Date对象 var d= new Date(); // days是相对时间,加到当前时间上 d.setTime(d.getTime()+(days*24*60*60*1000)); // 转化为格林威治时间 var expires = d.toGMTString(); document.cookie = name+"="+value+";expires="+expires; }
2.3.2 删除cookie
删除cookie就是将cookie的有效时间设置为0、负数或过去的时间。删除cokie时可以不指定cookie的值。
function delCookie(name){ //删除cookie
document.cookie = name+"=;expires="+(new Date(0)).toGMTString();
}
2.3.3 获取cookie
function getCookie(name){
var sname = name + "=";
//获取cookie存储字符串数组
var carr = document.cookie.split(";");
for(var i=0; i<carr.length; i++) {
// trim() 移除首尾空白字符
var c = carr[i].trim();
if (c.indexOf(name) == 0) {
return c.substring(name.length,c.length);
}
}
return "";
}
3. Web storage API
Web Storage 又叫浏览器端数据储存机制。是HTML5新增的Storage 接口,用于脚本在浏览器保存数据。包括两个对象window.sessionStorage和window.localStorage。
-
属性:Storage.length (window.localStorage.length)
-
方法:
- Storage.setItem(name,key) :设置值
- Storage.getItem(name):获取
- Storage.removeItem(name):删除
- Storage.clear():删除所有值
- Storage.key():获取键值
-
区别
- localStorage 用于长久保存整个网站的数据,保存的数据没有过期时间,直到手动去删除。
- sessionStorage 用于临时保存同一窗口(或标签页)的数据,在关闭窗口或标签页之后将会删除这些数据。
4. IndexedDB
参考链接:http://www.ruanyifeng.com/blog/2018/07/indexeddb.html
浏览器提供的本地数据库,它可以被网页脚本创建和操作。IndexedDB 允许储存大量数据,提供查找接口,还能建立索引。
5.共同点和区别
共同点
都是保存在浏览器端,且同源的。
区别
-
与服务端通信:cookie 始终在同源的 http 请求中携带,影响请求性能。而其他的不参与服务器通信。
-
存储大小
- cookie 数据大小不能超过 4k。
- sessionStorage 和 localStorage 虽然也有存储大小的限制,但比 cookie 大得多,可以达到 5M 或更大。
- indexDB理论上有无限存储大小
-
有期时间
-
cookie 可设置过期时间,默认为浏览器关闭则失效。
-
sessionStorage 数据在当前浏览器窗口关闭后自动删除。
-
localStorage 存储持久数据,浏览器关闭后数据不丢失除非主动删除数据;
-
indexDB 存储持久数据,浏览器关闭后数据不丢失除非主动删除数据;
-
-
作用域不同:
- sessionStorage 只在同一个窗口共享。在不同的浏览器窗口中不共享,即使是同域名。
- cookie可以通过domain属性设置可访问的域名,domain下的所有子域名都可共享
- localStorage,indexDB 仅在设置下的同域名共享,不受窗口影响。
6. 使用原则
- 没有大量数据存储需求,可以使用 localStorage 和 sessionStorage 。对于不怎么改变的数据尽量使用 localStorage 存储,否则可以用 sessionStorage 存储。
- 大量数据存储本地,可以使用indexDB进行存储(网页游戏)。
- 有一些平台不支持indexDB,例如微信小游戏等平台,此时需要本地存储大量数据的话,一般会用node的fs模块进行文件管理操作,创建本地文件进行数据储存,来实现indexDB的功能。且微信小游戏提供了相应的api支持这种方式操作的。