浏览器的四种本地存储方式

发布时间:2024-12-01 19:52

使用Chrome浏览器的隐私浏览模式 #生活知识# #生活经验# #软件#

最新推荐文章于 2024-10-30 21:10:40 发布

hxxfight 于 2022-06-17 23:05:12 发布

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。

文章目录 1.总结2.cookie2.1 设置cookie2.2 cookie的有效期2.3 JS操作cookie2.3.1 设置cookie2.3.2 删除cookie2.3.3 获取cookie 3. Web storage API4. IndexedDB5.共同点和区别共同点区别 6. 使用原则

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获取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"; 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 仅在设置下的同域名共享,不受窗口影响。

6. 使用原则

没有大量数据存储需求,可以使用 localStorage 和 sessionStorage 。对于不怎么改变的数据尽量使用 localStorage 存储,否则可以用 sessionStorage 存储。大量数据存储本地,可以使用indexDB进行存储(网页游戏)。有一些平台不支持indexDB,例如微信小游戏等平台,此时需要本地存储大量数据的话,一般会用node的fs模块进行文件管理操作,创建本地文件进行数据储存,来实现indexDB的功能。且微信小游戏提供了相应的api支持这种方式操作的。

网址:浏览器的四种本地存储方式 https://www.yuejiaxmz.com/news/view/338042

相关内容

如何清理电脑浏览器缓存,4款常用浏览器清理缓存的方法
Google Chrome谷歌浏览器清理缓存的常用方法
QQ浏览器官方
C#开发最快的浏览器,打造极速浏览体验
使用edge浏览器浏览B站网页端卡顿的一个解决方法
浏览器内核+浏览器外壳+插件=操作系统?
Edge浏览器访问特殊网站端口(如10080)出现ERR
Google Chrome 网络浏览器
Win7 下哪个浏览器最好用
前端浏览器兼容

随便看看