admin管理员组文章数量:1567540
1、cookie
1.1、cookie的作用
说到cookie,其实cookie有两个主要功能,
- 用于
解决http无状态的缺点
,在客户端存储会话信息,记录用户的状态 - 也就是我们现在也经常使用cookie
在客户端存储一些数据
1.2、cookie的构成
document.cookie="key=value"
key和value是包含在一个字符串中
一般来说,cookie是由浏览器保存的以下几块信息构成的
name
这个name为自己取的cookie名称,同名的值会覆盖domain
可以访问此 cookie 的域名path
,可以访问此 cookie 的页面路径Expires/Max-Age
设置失效时间,分别是到期时间(Expires) / 持续时间 (单位是秒)(Max-Age)http-only
是否只作为http时使用,如果为true,那么客户端能够在http请求和响应中进行传输,但时客户端浏览器不能使用js去读取或修改Size
, 此 cookie 大小。secure
字段,设置是否只能通过 https 来传递此条 cookie
1.3、如何使用cookie存储数据
一般来说,有两种方式可以生成cookie
- 一种是服务器发送http响应时指定Set-Cookie进行指定,
- 另一种我们可以使用js生成cookie
由于cookie需要通过URL编码
,因此在写入cookie时和读取cookie时我们都需要进行编码和解码操作,可以采用js-cookie插件
来读取/设置cookie
1.4、cookie的缺点
(1)cookie的存储大小有限制
,对于每个域,一般只能设置20个cookie,每个cookie大小不能超过4KB
(2)浏览器会主动存储后台接口返回的 set-cookie 头信息,在浏览器本地设置cookie值
(3)通过 Expires(到期时间) / Max-Age(持续时间 ----单位是秒)
、设置时效性,如果不设置,关闭清空cookie,
(4)可以设置 http-only 属性为 true
,禁止客户端代码(js)修改该值
1.5、cookie常用方法
原生js操作cookie的方法
//设置cookie
document.cookie = `${key}=${value};`
//获取cookie,
// 返回值是当前域名下的所有cookie,并按照某种格式组织的字符串 :key=value;key1=value1;......keyn=valuen
let allCookies = document.cookie; //再以 “; ”来切割
封装后的cookie操作方法
//设置cookie
function setCookie(name,value,options={}){
let cookieData = `${name}=${value};`;
for(let key in options){
let str = `${key}=${options[key]};`;
cookieData += str;
}
document.cookie = cookieData;
}
//获取cookie
function getCookie(name){
let arr = document.cookie.split("; ");
for(let i=0;i<arr.length;i++){
let items = arr[i].split("=");
if(items[0]==name){
return items[1];
}
}
return "";
}
1.6、cookie总结
- cookie 在过期时间之前一直有效,即使窗口或浏览器关闭
- 浏览器也会在
每次请求的时候主动组织所有域下的cookie到请求头 cookie 中,发送给服务器端
- 浏览器会
主动存储接收到的 set-cookie 头信息的值
- 可以设置
http-only 属性为 true
来禁止客户端代码(js)修改该值 可以设置有效期
(默认浏览器关闭自动销毁)(不同浏览器有所不同)同域下个数有限制,最好不要超过50个
(不同浏览器有所不同)- 单个cookie
内容大小有限制
,最好不要超过4000字节(不同浏览器有所不同)
1.7、cookie 的常用场景:
- 保存用户登录状态。例如将用户 id 存储于一个 cookie 内,这样当用户下次访问该页面时就不需要重新登录了
- 跟踪用户行为。通过cookie记住用户操作行为,当下次再打开该页面时,自动默认该行为。比如说:不同用户所在地区的天气情况只要设置一次,下次打开就是之前设置的地方的天气。或者说网站的换肤功能等。
1.8、cookie 有哪些编码方式?
参考回答: encodeURI()
2、本地缓存Storage----- sessionStorage、localStorage
2.1、使用方法
-
设置
setItem(key, value)
添加或更新(如果数据项中已存在该key)数据项中指定key的value -
获取
getItem(key)
获取数据项中指定key对应的value -
移出指定数据
removeItem(key)
删除数据项中指定key的value -
清空所有数据
clear()
清空所有数据项
2.2、不同点
localStorage
- 窗口或浏览器关闭也一直保存,始终有效,因此用作持久数据
- 在所有同源窗口 (ip+port相同) 中都是共享的
- 支持 storage 事件
sessionStorage
- 仅在当前浏览器窗口关闭前有效
- 页面私有,只在当前窗口拥有,即使地址相同,再打开一个新窗口,也没有
- 不支持 storage 事件
cookie
- 只在设置的 cookie 过期时间之前一直有效,即使窗口或浏览器关闭
2.3、共同点
localStorage和sessionStorage和cookie共同点
- 同域(同源策略)限制:同源策略:请求与响应的 协议、域名、端口都相同 则时同源,否则为 跨源/跨域
- 存储的内容都会转为字符串格式
- 都有存储大小限制
localStorage和sessionStorage共同点
- API相同
- 存储大小限制一样基本类似
- 无个数限制
lcookie
- 浏览器也会在每次请求的时候主动组织所有域下的cookie到请求头 cookie 中,发送给服务器端
- 浏览器会主动存储接收到的 set-cookie 头信息的值
- 可以设置 http-only 属性为 true 来禁止客户端代码(js)修改该值
- 可以设置有效期 (默认浏览器关闭自动销毁)(不同浏览器有所不同)
- 同域下个数有限制,最好不要超过50个(不同浏览器有所不同)
- 单个cookie内容大小有限制,最好不要超过4000字节(不同浏览器有所不同)
2.4、同一浏览器的同源但不同标签页间,可以共享 localStorage,但是无法共享sessionStorage的详细说明
localStorage不同窗口共享
即A窗口新增/修改localStorage的值,那么B窗口也会新增/修改相应的值,两个窗口的localStorage数据是同步的。
sessionStorage不同窗口之间无法共享
1、刷新页面sessionStorage不会清除
2、打开多个相同的URL的Tab窗口,会创建各自的sessionStorage。
3、关闭对应tab窗口,会清除对应的sessionStorage。
- 4、在当前窗口打开一个新的同源窗口时,会复制当前窗口的session数据到新的窗口。
但是如果你不从当前窗口处打开,而是直接打开一个新的同源窗口,那么浏览器并不会复制之前同源窗口的session数据到新的窗口,而是会创建一个新的sessionStorage
<----注意!!!!!!!!!!!
3、cookie、localStorage、sessionStorage之间的区别
- 1、请求时是否会自动携带
cookie数据始终在同源的http请求中携带(即使不需要),即cookie在浏览器和服务器间来回传递。而sessionStorage和localStorage不会自动把数据发给服务器,仅在本地保存。cookie数据还有路径(path)的概念,可以限制cookie只属于某个路径下。 - 2、存储大小限制不同
cookie数据不能超过4k
,很多浏览器都限制一个站点最多保存 20 个 。sessionStorage和localStorage 虽然也有存储大小的限制,但比cookie大得多,可以达到5M或更大
。 - 3、数据有效期不同
- sessionStorage:仅在
当前浏览器窗口关闭前有效
,即当前窗口关闭后数据就会被清空; - localStorage:
始终有效
,窗口或浏览器关闭也一直存在,没有有效期,除非删除,否则一直存在; - cookie只在设置的
cookie过期时间之前一直有效
,即使窗口或浏览器关闭。
- 4、作用域不同
- sessionStorage
限制在单个标签页中
- localStorage
在所有同源窗口中都是共享的
; - cookie
在所有同源窗口中都是共享的
。
-
5、是否支持 storage 事件-----监听变化
localStorage支持storage事件
sessionStorage、cookie不支持; -
6、Web Storage
支持事件通知机制
,可以将数据更新的通知发送给监听者。 -
7、存放位置
cookie 数据存放在客户的浏览器上,session 数据放在服务器上。
cookie 不是很安全,别人可以分析存放在本地的 COOKIE 并进行 COOKIE 欺骗 考虑到安全应当使用 session。
session 会在一定时间内保存在服务器上。当访问增多,会比较占用你服务器的性能,考虑到减轻服务器性能方面,应当使用 COOKIE。
4、IndexedDB
4.1、为什么会有IndexedDB
现有的浏览器数据储存方案,都不适合储存大量数据:Cookie 的大小不超过4KB,且每次请求都会发送回服务器;LocalStorage 存储上限在 5MB 左右,而且不提供搜索功能,不能建立自定义的索引,所以,需要一种新的解决方案,这就是 IndexedDB 诞生的背景
4.2、什么是IndexedDB
通俗地说,IndexedDB 就是浏览器提供的本地数据库
,它可以被网页脚本创建和操作,IndexedDB 允许储存大量数据,提供查找接口,还能建立索引
,这些都是 LocalStorage 所不具备的,就数据库类型而言,IndexedDB 不属于关系型数据库(不支持 SQL 查询语句),更接近 NoSQL 数据库.
4.3、IndexDB的优点
- a、键值对储存
- b、异步: IndexedDB 操作时不会锁死浏览器,用户依然可以进行其他操作,这与 LocalStorage 形成对比,后者的操作是同步的,异步设计是为了防止大量数据的读写,拖慢网页的表现
- c、支持事务: IndexedDB 支持事务(transaction),这意味着一系列操作步骤之中,只要有一步失败,整个事务就都取消,数据库回滚到事务发生之前的状态,不存在只改写一部分数据的情况
- d、同源限制:IndexedDB 受到同源限制,每一个数据库对应创建它的域名,网页只能访问自身域名下的数据库,而不能访问跨域的数据库
- e、储存空间大: IndexedDB 的储存空间比 LocalStorage 大得多,一般来说不少于 250MB,甚至没有上限
- f、支持二进制储存:IndexedDB 不仅可以储存字符串,还可以储存二进制数据(ArrayBuffer 对象和 Blob 对象)
4.4、IndexDB的缺点
- a、不支持DO操作;
- b、不能跨域
IndexDB参考链接:https://blog.csdn/qq_39958056/article/details/125524904
参考链接:https://zhuanlan.zhihu/p/159268611
本文标签: 数据存储浏览器方式cookiesessionstorage
版权声明:本文标题:浏览器数据存储方式总结---localStorage、sessionStorage、cookie 内容由热心网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:https://www.elefans.com/dianzi/1726625301a1078699.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论