【知识】浏览器的LocalStorage本地存储入门

【知识】浏览器的LocalStorage本地存储入门,第1张

localstorage 在浏览器的 API 有两个:localStorage 和sessionStorage,存在于 window 对象中:localStorage 对应 windowlocalStorage,sessionStorage 对应 windowsessionStorage。

localStorage 和 sessionStorage 的区别主要是在于其生存期。

localStorage 理论上来说是永久有效的,即不主动清空的话就不会消失,即使保存的数据超出了浏览器所规定的大小,也不会把旧数据清空而只会报错。但需要注意的是,在移动设备上的浏览器或各 Native App 用到的 WebView 里, localStorage 都是不可靠的,可能会因为各种原因(比如说退出App、网络切换、内存不足等原因)被清空。

sessionStorage 的生存期顾名思义,类似于 session ,只要关闭浏览器(也包括浏览器的标签页),就会被清空。由于 sessionStorage 的生存期太短,因此应用场景很有限,但从另一方面来看,不容易出现异常情况,比较可靠。

localstorage为标准的键值对(Key-Value,简称KV)数据类型,简单但也易扩展,只要以某种编码方式把想要存储进localstorage的对象给转化成字符串,就能轻松支持。举点例子:把对象转换成json字符串,就能让存储对象了;把转换成DataUrl(base64),就可以存储了。另外对于键值对数据类型来说,"键是唯一的"这个特性也是相当重要的,重复以同一个键来赋值的话,会覆盖上次的值。

很遗憾,localstorage原生是不支持设置过期时间的,想要设置的话,就只能自己来封装一层逻辑来实现:

function set(key,value){ var curtime = new Date()getTime();//获取当前时间 localStoragesetItem(key,JSONstringify({val:value,time:curtime}));//转换成json字符串序列 } function get(key,exp)//exp是设置的过期时间 { var val = localStoragegetItem(key);//获取存储的元素 var dataobj = JSONparse(val);//解析出json对象 if(new Date()getTime() - dataobjtime > exp)//如果当前时间-减去存储的元素在创建时候设置的时间 > 过期时间 { consolelog("expires");//提示过期 } else{ consolelog("val="+dataobjval); } }

目前业界基本上统一为5M,已经比cookies的4K要大很多了,省着点用吧骚年。

由于浏览器的安全策略,localstorage是无法跨域的,也无法让子域名继承父域名的localstorage数据,这点跟cookies的差别还是蛮大的。

localstorage在目前的浏览器环境来说,还不是完全稳定的,可能会出现各种各样的bug,一定要考虑好异常处理。我个人认为localstorage只是资源本地化的一种优化手段,不能因为使用localstorage就降低了程序的可用性,那种只是在console里输出点错误信息的异常处理我是绝对反对的。localstorage的异常处理一般用 try/catch 来捕获/处理异常。

目前普遍的做法是检测 windowlocalStorage 是否存在,但某些浏览器存在bug,虽然"支持"localstorage,但在实际过程中甚至可能出现无法setItem()这样的低级bug。因此我建议,可以通过在 try/catch 结构里 set/get 一个测试数据有无出现异常来判断该浏览器是否支持localstorage,当然测试完后记得删掉测试数据哦。

在chrome开发者工具里的 Resources - Local Storage 面板以及 Resources - Session Storage 面板里,可以看到当前域名下的localstorage数据。

[上传失败(image-8443f6-1649756043745)]

原文链接: >

1、浏览器本地存储 windowlocalStorage

用浏览器本地存储存储账号登录信息,同一浏览器下不同账号登录时,后一账号的登录信息会覆盖前一账号的登录信息,此时前一账号缓存的信息会丢失,造成页面数据获取错误或者报错, 如果不同账号下缓存的数据不同,则一定不要用本地存储,可以采用会话存储

2、浏览器会话存储 windowsessionStorage

用会话存储信息数据,不同账号登录数据都不会相互覆盖,退出浏览器后数据自动清除

一个请求url的 协议、端口、域名 其中任意一个与当前页面url不相同就是跨域

即:>

一、Token 一般是存放在哪里 Token 放在 cookie 和放在localStorage、sessionStorage 中有什么不同

localStorage生命周期是永久,除非主动清除localStorage信息,否则这些信息将永远存在。

存放数据大小为一般为5MB,而且它仅在客户端(即浏览器)中保存,不参与和服务器的通信。

// 1、保存数据到本地

// 第一个参数是保存的变量名,第二个是赋给变量的值

// 2、从本地存储获取数据

// 3、从本地存储删除某个已保存的数据

// 4、清除所有保存的数据

sessionStorage仅在当前会话下有效,关闭页面或浏览器后被清除。

存放数据大小为一般为5MB,而且它仅在客户端(即浏览器)中保存,不参与和服务器的通信。

// 1、保存数据到本地

// 第一个参数是保存的变量名,第二个是赋给变量的值

// 2、从本地存储获取数据

// 3、从本地存储删除某个已保存的数据

// 4、清除所有保存的数据

复杂数据存储

上面都是对于简单的数据类型的存储,但当要存储的数据是一个对象或是数组的时候,直接存储是不行的

这个时候,就需要转换数据格式。

存储数据前:利用JSONstringify将对象转换成字符串

获取数据后:利用JSONparse将字符串转换成对象

cookie机制:如果不在浏览器中设置过期事件,cookie被保存在内存中,生命周期随浏览器的关闭而结束,这种cookie简称为会话cookie。如果在浏览器中设置了cookie的过期事件,cookie会被保存在硬盘中,关闭浏览器后,cookie数据仍然存在,直到过期事件结束才消失。cookie是服务端发给客户端的特殊信息,cookie是以文本的方式保存在客户端,每次请求时都带上它

保存用户登录状态

跟踪用户行为

定制页面

创建购物车:使用cookie来记录用户需要购买的商品,再结帐的时候可以统一提交。(淘宝网就是使用cookie记录了用户曾经浏览过的商品,方便随时进行比较)

// 1、保存数据到本地

// 第一个参数是保存的变量名,第二个是赋给变量的值

//保存cookie

//参数:cookie名,cookie值,有效时长(单位:天)

//删除cookie

cookie缺点:

大小受限

用户可以 *** 作(禁用)cookie,使功能受限

安全性较低

有些状态不可能保存在客户端。

每次访问都要传送cookie给服务器,浪费带宽。

cookie数据有路径(path)的概念,可以限制cookie只属于某个路径下。

l

二、WebSocket 是怎么实现点对点通信和广播通信的?

Token 其实就是访问资源的凭证。

一般用户通过用户名和密码登录成功后,服务器将登录凭证做数字签名,加密之后得到的字符串作为token。

客户端主要存储方式:

WebSocket 使得客户端和服务器之间的数据交换变得更加简单,允许服务端主动向客户端推送数据。在 WebSocket API 中,浏览器和服务器只需要完成一次握手,两者之间就直接可以创建持久性的连接,并进行双向数据传输。

在 WebSocket API 中,浏览器和服务器只需要做一个握手的动作,然后,浏览器和服务器之间就形成了一条快速通道。两者之间就直接可以数据互相传送。

现在,很多网站为了实现推送技术,所用的技术都是 Ajax 轮询。轮询是在特定的的时间间隔(如每1秒),由浏览器对服务器发出>

两个不同的域名的localStorage不能直接互相访问。那么如何在 aaacom 中如何调用 bbbcom 的localStorage

1在 aaacom 的页面中,在页面中嵌入一个src为 bbbcom 的 iframe ,此时这个 iframe 里可以调用 bbbcom 的localStorage。

2用 postMessage 方法实现页面与 iframe 之间的通信。

综合1、2便可以实现 aaacom 中调用 bbbcom 的localStorage。

我们可以在 bbbcom 中写一个专门负责共享localStorage的页面,例如叫做 page1html ,这样可以防止无用的资源加载到 iframe 中。

以在 aaacom 中读取 bbbcom 中的localStorage的 item1 为例,写同理:

bbbcom 中 page1html ,监听 aaacom 通过 postMessage 传来的信息,读取localStorage,然后再使用 postMessage 方法传给 aaacom 的接收者。

在 aaacom 的页面中加入一个src为 bbbcom/page1html 隐藏的 iframe 。

在 aaacom 的页面中加入下面script标签。在页面加载完毕时通过 postMessage 告诉 iframe 中监听者,读取 item1 。监听 bbbcom 传回的 item1 的值并输出。

以上就是关于【知识】浏览器的LocalStorage本地存储入门全部的内容,包括:【知识】浏览器的LocalStorage本地存储入门、tp5的token()怎么用vue实时获取、多账号登录浏览器缓存冲突问题等相关内容解答,如果想了解更多相关内容,可以关注我们,你们的支持是我们更新的动力!

欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/web/9522769.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-04-29
下一篇 2023-04-29

发表评论

登录后才能评论

评论列表(0条)

保存