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

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实时获取、多账号登录浏览器缓存冲突问题等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！