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()方法。
属性说明keycookie的键(名称)valuecookie的值max_agecookie被保存的时间数,单位为秒。expires具体的过期时间,一个datetime对象或UNIX时间戳path限制cookie只在给定的路径可用,默认为整个域名下路径都可用domain设置cookie可用的域名,默认是当前域名,子域名需要利用通配符domain=.当前域名secure如果设为True,只有通过HTTPS才可以用httponly如果设为True,进制客户端JavaScript获取cookie2.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"; 1
函数形式
给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; } 12345678910 2.3.2 删除cookie
删除cookie就是将cookie的有效时间设置为0、负数或过去的时间。删除cokie时可以不指定cookie的值。
function delCookie(name){ //删除cookiedocument.cookie = name+"=;expires="+(new Date(0)).toGMTString(); } 123 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 ""; } 12345678910111213
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 仅在设置下的同域名共享,不受窗口影响。