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

相关推荐
知心宝贝12 分钟前
写了那么久的前端,你真的了解浏览器背后的“小动作“吗?
前端·程序员·浏览器
wycode12 分钟前
Vue2实践(2)之用component做一个动态表单(一)
前端·javascript·vue.js
维李设论14 分钟前
前端智能化 | AG-UI实践及原理浅析
前端·aigc·agent
第七种黄昏14 分钟前
Vue3 中的 ref、模板引用和 defineExpose 详解
前端·javascript·vue.js
一只卡比兽15 分钟前
动态规划与贪心算法详解:原理、对比与代码实践
前端
aiwery18 分钟前
一文掌握 TypeScript 工具类型:Record、Partial、Omit、Pick 等实战用法
前端·代码规范
ankleless32 分钟前
C语言(12)——进阶函数
前端·html
一条上岸小咸鱼36 分钟前
Kotlin 基本数据类型(四):String
android·前端·kotlin
我是哈哈hh1 小时前
【Node.js】ECMAScript标准 以及 npm安装
开发语言·前端·javascript·node.js
张元清1 小时前
电商 Feeds 流缓存策略:Temu vs 拼多多的技术选择
前端·javascript·面试