admin管理员组文章数量:1567758
浏览器缓存–cookie、sessionStorage、localStorage、indexedDB
cookie
最初用于在客户端存储会话信息
服务器在响应 HTTP 请求时,向客户端发送 Set-cookie HTTP头部包含会话信息,浏览器回存储这些会话信息(存在客户端本地),并且在之后同域名,而且符合 path 要求的每个请求中都会通过HTTP头部cookie将他发回服务器
Cookie的仅作用范围最主要由和 domain 域名和 path 路径限定,与协议和端口无关
会话存储:
特定域绑定,设置cookie后,他会与请求一起发送到创建它的域
一些限制:每个域不超过20个cookie,浏览器不超过300个cookie,每个cookie不超过4096个字节……
的过期时间由客户端设置。若不设置过期时间,则表示这个 cookie`的生命期为浏览器会话期间,关闭浏览器窗口, cookie 就会消失
构成:
1)名称name:不分大小写,必须经过URL编码
2)值:存在cookie中的字符串值,这个值必须经过URL编码
3)域:发送到这个域的请求都会带上cookie
4)路径:请求路径包含这个路径才会把cookie发送到服务器
5)过期时间:表示合适删除cookie的时间戳,默认情况下浏览器会话结束就会删除所有cookie,不过也可以自己设置 一个过期时间,这样即使关闭浏览器,时间到了cookie也会被删除
6)安全标志:只有使用功能SSL安全链接的情况下才会把cookie发送到服务器
Set-Cookie:name=value,expires=Mon,22-Jan-07 07:10:24 GMT;domains=.wrox;secure
cookie叫做name的cookie,Mon,22-Jan-07 07:10:24过期,.wrox及其他子域携带cookie,SSL连接才随请求发送到服务器
实际上发送给服务器的只有cookie的 名/值 对
document.cookie // 获取页面中所有有效的cookie字符串
document.cookie=encodeURIComponent("name") + "=" + encodeURIComponent("Nicholas") + "; domain=.wrox;secure" // 设置cookie
不要在cookie中存储重要或敏感信息
web Storage
只能存储字符串,所以非字符串需要转为字符串,最常用 JSON.stringify()
sessionStorage
会话存储机制
特点:
1》存储位置:将数据保存在session对象中
2》时效性:从进入网站到关闭窗口(从开始会话到结束会话)期间有效(临时保存);页面关闭消失,但是不受页面刷新影响
3》共享限制:前提是同源,同一个会话及这个会话的跳转,打开新页面(同一个会话,不受标签页的影响,路由切换也是没有关系,甚至windo.open开一个新页面,html变了也没有关系,单页面用得多一些);如果直接复制地址,新开一个标签页打开是没有的,只要当前会话打开或跳转一个同源的页面就能拿到
4》存储大小是由限制的,比cookie大,比localStorage小,5M左右
增删改查的api
// 获取
sessionStorage.getItem(key)
sessionStorage.key
// 添加设置、修改
sessionStorage.setItem(key,value)
sesisonStoreage.key=value
// 删除
sessionStorage.removeItem(key)
delete sessionStorage.key
sessionStorage.clear()
注意事项:理论上是同源就共享,但也可能出现没有共享的情况
1》使用window.open()打开同源url,sessionStorage仍然共享
window.open("http://localhost:8080/index.html");
2》a标签打开新页面
<a href="http://localhost:8080/echart.html" target="_blank"a标签打开新页面</a>
发现新开的页面,sessionStorage并没能共享过来
解决方法:加上 rel=“opener”
<a href="http://localhost:8080/index.html" target="_blank" rel="opener"
>打开新的tab标签页</a
>
rel:规定当前文档与目标 URL 之间的关系。仅在 href 属性存在时使用
3》如果你直接打开一个同源新的tab页面,就算是同源也是无法共享sessionStorage
即使是同一个地址,同一个路由都不行
4》使用vue-router跳转,当前页面内部的跳转肯定可以共享
localStorage
永久存储机制
特点:
1》存储位置:将数据保存在客户端本地硬件设备中(通常指硬盘,也可以时其他应键设备中)
2》时效性:浏览器关闭,改数据依然存在(永久保存)设置手动清除才清除
3》共享限制:前提是同源,不同标签页、不同窗口可以访问,但是跨域和跨浏览器不能访问到(也就是在打开页面之后对当前标签页的数据进行一些增删改,同浏览器同源的数据都会发生变化)
4》存储大小相对来说比较大
增删改查的api
// 获取
localStorage.getItem(key)
localStorage.key
// 添加设置、修改
localStorage.setItem(key,value)
localStorage.key=value
// 删除
localStorage.removeItem(key)
delete localStorage.key
localStorage.clear()
监视storage中的数据
存储事件storage,每次使用setItem delete removeItem clear 都会触发这个事件
window.addEventListener("storage",e=>{
console.log("存储变化对应的域:", e.domain,"被设置或删除的值:",e.key,
"键被设置的新值 删除为null", e.newValue, 键变化之前的值 e.oldValue)
})
同源同浏览器同窗口,打开两个标签页,修改一个的localStorage,另一个就能监听到变化
window.addEventListener(
'storage',
event => {
console.log('监听到localStorage中的值发生了变化')
console.log(event) //常用的属性event.key event.url event.newValue event.oldValue
},
false
)
document.querySelector('#btn').addEventListener('click', () => {
localStorage.setItem('test', '72变')
})
修改setItem方法,让本页面能够监听到变化(其他页面监听不到)
var orignalSetItem = localStorage.setItem
localStorage.setItem = function(key, newValue) {
var setItemEvent = new Event('setItemEvent')
setItemEvent.newValue = newValue
window.dispatchEvent(setItemEvent)
orignalSetItem.apply(this, arguments)
}
window.addEventListener('setItemEvent', function(e) {
alert(e.newValue)
})
document.querySelector('#btn').addEventListener('click', () => {
localStorage.setItem('test', 'samePage')
})
cookie、sessionStorage、localStorage三者对比
不同点
cookie
1 存储数量据小
2 在设置的期限到达之前有效,及时关闭浏览器*
3 在同一浏览器的所有同域名且路径符合要求的窗口共享 (前提是cookie的domain、path、ssl 满足要求),即使页面不同也可以拿到;不同浏览器安全问题肯定是不能共享啦
4 cookie数据始终在符合要求的http请求中携带(即使不需要),即cookie在浏览器和服务器间来回传递
sessionStorage
1 存储数据量较大
2 当前浏览器关闭之前有效
3 只在当前浏览器的当前会话共享 ,即使是同一浏览器,不同会话也不能共享cookie
4 sessionStorage不会自动把数据发送给服务器,仅在本地保存
localStorage
1 存储数据量大
2 除非自己删除,否则一直有效,即使浏览器关闭
3 在当前浏览器所有同源窗口共享*
4 localStorage不会自动把数据发送给服务器,仅在本地保存
相同点
都可以用来存储数据,且都保存在客户端(浏览器)
IndexedDB
结构化数据存储机制
IndexedDB设计几乎完全是异步的,所以大多操作以请求的形式执行
与传统数据库不同的是,使用对象存储而不是表格保存数据
浏览器可能对indexDB有50M大小的限制
1、使用indexedDB.open打开数据库,建立连接
let db,request,version=1
request=indexedDB.open("admin",version) // 版本为整数
request.onerror=event=>console.log("失败",event.target.errorCode)
request.onsuccess=event=>db=event.target.result
2、存储对象数据
request.onupgradeneeded=event=>{
const db=event.target.result
if(db.bojectStoreNames.contains("users")){
db.deleteObjectStore("users")
}
db.createObjectSyore("users",{keyPath:"username"})
}
3、通过事物操作数据
let transaction=db.transaction("users")
transaction.onerror=e=>console.log(e)
transaction.onsuccess=e=>console.log(e)
本文标签: 缓存浏览器cookieIndexedDBlocalstorage
版权声明:本文标题:浏览器缓存--cookie、sessionStorage、localStorage、indexedDB 内容由热心网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:https://www.elefans.com/xitong/1726625166a1078688.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论