浏览器本地存储LocalStorage详解

LocalStorage、SessionStorage和Cookie,可以称得上浏览器存储的三架马车。它们的各自优缺点在此不细说,只说说在工作中遇到的一个与LocalStorage有关的问题。

背景

我们将一个表示类型的值type存储在LocalStorage中,因为这个值只要用户不手动删除,就会一直存在,每次进入页面都从storage中读取该值。一切都运行的好好的,直到有一天,我们需要兼容另外一个域名,即不管用户是访问的我们自己的域名还是另外那个域名,都要能进入到我们系统。一切也都好好的,直到这两天一个用户来说,有的页面数据不对,经过排查,发现是获取type的值出现异常导致了这个问题。

我们会在用户进入首页的时候存储type的值,在其他页面直接使用。但是当用户进入首页是使用的A域名,然后使用了B域名访问其他页面时,因为LocalStorage要受到浏览器同源策略的限制,导致在A域名存储的值在B域名的页面中是获取不到的。

LocalStorage

只读的localStorage 属性允许你访问一个Document 源(origin)的对象 Storage;存储的数据将保存在浏览器会话中。localStorage 类似 sessionStorage,但其区别在于:存储在 localStorage 的数据可以长期保留;而当页面会话结束------也就是说,当页面被关闭时,存储在 sessionStorage 的数据会被清除。
应注意,无论数据存储在 localStorage 还是 sessionStorage它们都特定于页面的协议。
另外,localStorage 中的键值对总是以字符串的形式存储。 (需要注意,和 js 对象相比,键值对总是以字符串的形式存储意味着数值类型会自动转化为字符串类型).

以上内容是从MDN中获取中,从以上内容中,可以获取到这些信息:

  1. LocalStorage是可以长期保留的;
  2. LocalStorage是特定于页面的,这个页面也可以说是域名,即在什么域名下存储的值,也只能在这个域名下的页面中才能获取到这些值;
  3. LocalStorage存储的值都是字符串。
长期保留

当我们将一个值存储到LocalStorage中后,不管是关闭浏览器、关闭电脑还是关闭页签,这些值都会一直存在。后面不管什么时候,都依然能获取到这个值。但是LocalStoratge也属于浏览器缓存的一部分,当我们在手动清除缓存时,也是会清理掉这里面的值的。因此,这个长期指的是没有用户手动清理的情况下。

那么,是不是意味着只要用户不手动清理,我们存储的值就会永久保留呢?

答案是是的。当我们存储在LocalStorage中的数据量超过限定值后,再存储时会提示超出最大值。

但是也不建议使用LocalStorage存储大数据量的值,因为LocalStorage是有存储大小限制的。不同浏览器的限制值不一样,通常在5M左右。如果有大数据量需要存储,那么需要使用IndexDB等方式。

特定于页面

既然我们存储在LocalStorage中的值可以长期存储,那么是不是意味着不管在哪儿都能获取到存储的值呢?并不是。想象一下,如果我们在a域名存储了一个用户名,如果在b域名下能访问这个值,那这不是给了那些黑客们来攻击我们服务的机会了,他们就可以肆意的获取我们存储在LocalStorage中的值。

因此,单从这个安全性考虑,LocalStorage中的值就不能随便获取,而浏览器也做了这个限制。即我们在a域名下存储的值,就只能在a域名的页面访问。从b域名是获取不到我们在a域名中存储的值的。

字符串的形式存储

不管我们在存储的时候,是存储的哪种值类型,都会被浏览器先转换成字符串,再进行存储。因此,如果我们有字符串之外的值类型需要存储时,那么我们要先把这些值转成字符串的形式,再存储。比如存储一个对象,在获取使用的时候,从LocalStorage中获取到的是一个字符串,需要先转成对象再使用。

相关推荐
王哈哈^_^1 小时前
【数据集】【YOLO】【目标检测】交通事故识别数据集 8939 张,YOLO道路事故目标检测实战训练教程!
前端·人工智能·深度学习·yolo·目标检测·计算机视觉·pyqt
cs_dn_Jie1 小时前
钉钉 H5 微应用 手机端调试
前端·javascript·vue.js·vue·钉钉
开心工作室_kaic2 小时前
ssm068海鲜自助餐厅系统+vue(论文+源码)_kaic
前端·javascript·vue.js
有梦想的刺儿2 小时前
webWorker基本用法
前端·javascript·vue.js
cy玩具3 小时前
点击评论详情,跳到评论页面,携带对象参数写法:
前端
qq_390161773 小时前
防抖函数--应用场景及示例
前端·javascript
John.liu_Test4 小时前
js下载excel示例demo
前端·javascript·excel
Yaml44 小时前
智能化健身房管理:Spring Boot与Vue的创新解决方案
前端·spring boot·后端·mysql·vue·健身房管理
PleaSure乐事4 小时前
【React.js】AntDesignPro左侧菜单栏栏目名称不显示的解决方案
前端·javascript·react.js·前端框架·webstorm·antdesignpro
哟哟耶耶4 小时前
js-将JavaScript对象或值转换为JSON字符串 JSON.stringify(this.SelectDataListCourse)
前端·javascript·json