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

相关推荐
oooo_z6 分钟前
美股历史K线数据API接口选型指南:iTick覆盖1分钟到月线全周期
服务器·前端·javascript
今日无bug20 分钟前
从 0 到 1 搭建端侧 AI 项目:DeepSeek-R1 + WebGPU + React + TS + Tailwind 全栈笔记
前端·react.js·typescript
mmsx23 分钟前
MapLibre 实战 08|GPS 点漂了几百米才被发现:GCJ-02 纠偏原理与"转两次"陷阱
android·前端
李高钢25 分钟前
Python Flask 框架入门:从零搭建你的第一个 Web 应用
前端·python·flask
特立独行的猫A26 分钟前
用仓颉语言写 Coding Agent:cjh 是怎么实现的
前端
特立独行的猫A29 分钟前
cjh:基于华为仓颉语言的原生 Coding Agent Harness 实践与设计思考
前端
晚安日记wanna35 分钟前
大文件分片上传的五层追问从 Blob 切片到秒传与弱网容错
前端·面试
Htr_40 分钟前
Anysite.io 使用指南:把整个 Web 变成 AI 智能体的数据库
前端·数据库·人工智能
知兀43 分钟前
【前端】受控和非受控组件
前端·javascript·react
玉宇夕落44 分钟前
别再把 SSE 当普通流式了!从 EventSource 到 LangChain,一次讲透实时推送与流式输出
前端