浏览器本地存储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中获取到的是一个字符串,需要先转成对象再使用。

相关推荐
轻口味31 分钟前
【每日学点鸿蒙知识】AVCodec、SmartPerf工具、web组件加载、监听键盘的显示隐藏、Asset Store Kit
前端·华为·harmonyos
alikami33 分钟前
【若依】用 post 请求传 json 格式的数据下载文件
前端·javascript·json
吃杠碰小鸡1 小时前
lodash常用函数
前端·javascript
emoji1111111 小时前
前端对页面数据进行缓存
开发语言·前端·javascript
泰伦闲鱼1 小时前
nestjs:GET REQUEST 缓存问题
服务器·前端·缓存·node.js·nestjs
m0_748250031 小时前
Web 第一次作业 初探html 使用VSCode工具开发
前端·html
一个处女座的程序猿O(∩_∩)O1 小时前
vue3 如何使用 mounted
前端·javascript·vue.js
m0_748235952 小时前
web复习(三)
前端
AiFlutter2 小时前
Flutter-底部分享弹窗(showModalBottomSheet)
java·前端·flutter
麦兜*2 小时前
轮播图带详情插件、uniApp插件
前端·javascript·uni-app·vue