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

相关推荐
AlienZHOU3 小时前
AI Coding 时代下,我的技术面试实践分享
前端·后端·面试
Captaincc6 小时前
AI用量v0.1.11更新发布 新增 jusage doctor 诊断指令 托盘展示token 和余额 新增 AutoClaw 支持
前端·后端·vibecoding
计算机魔术师8 小时前
德国Wiki被黑后两周,OpenAI终于把模型失控的账本摊开了
前端
kyriewen8 小时前
我让 AI 当面试官面了我一轮:第 3 个追问我就卡住了(附 10 道追问清单)
前端·面试·ai编程
IT_陈寒8 小时前
Python的GIL把我坑惨了,多线程跑得比单线程还慢
前端·人工智能·后端
前端snow9 小时前
ai agent --- 多agent框架之图编排引擎-langgraph
前端
竹林8189 小时前
OmniPic Studio v3.2.1 核心技术架构与全平台发版解析文档
前端·浏览器
JamesZhang800789 小时前
页面内存只涨不跌? 一次泄漏排查, 牵出 WeakMap 的诞生
前端
Z小明9 小时前
第 6 章 组件进阶
前端·vue.js
江华森9 小时前
HTTP请求的完整过程详解:从DNS解析到TCP挥手的微秒级实战分析
前端