【JavaScript】localStorage

1. 什么是 localStorage

localStorage 是一个 JavaScript API,允许在浏览器中存储键值对数据。它提供了一个简单的持久性存储方案,数据保存在用户的本地浏览器中,并且在页面刷新或关闭后依然存在。它只能存储字符串类型的数据。

无痕模式下,关闭浏览器,localStorage 中存储的数据也会被清空。

2. 如何使用 localStorage

javascript 复制代码
// 存储数据
localStorage.setItem('key', 'value');

// 获取数据
const value = localStorage.getItem('key');

// 删除数据
localStorage.removeItem('key');

// 清空所有数据
localStorage.clear();
js 复制代码
console.log(localStorage,sessionStorage)
let color = {
    "c1": "red",
    "c2": "green"
}
// 存储时 都会先转为 string 所以我们如果想要存储复杂类型 需要转 json
localStorage.setItem('color', JSON.stringify(color))
console.log(JSON.parse(localStorage.getItem('color')))

3. localStorage 的容量限制是多少?

每个域名下的 localStorage 都有一定的存储容量限制,通常在 5MB 左右(远大于 cookie 的 4kb)。这个限制是浏览器实现的,不同浏览器可能有略微不同的限制。如果超过了这个限制,浏览器可能会提示用户清理缓存或拒绝继续写入数据(不同浏览器有相应的不同策略)。

4. localStoragesessionStorage 有什么区别?

localStoragesessionStorage 都属于 Web Storage API,但它们有一些关键区别:

  • localStorage 中存储的数据在页面关闭后依然存在,而 sessionStorage 中存储的数据在会话结束(页面关闭)后被清除。
  • localStorage 中的数据可以在同一域名下的任何页面间共享,而 sessionStorage 中的数据只能在同一页面的不同窗口或标签页间共享。
相关推荐
蜡笔羊驼12 分钟前
LALIC环境安装过程
开发语言·python·深度学习
codeJinger17 分钟前
【Python】基础知识
开发语言·python
css趣多多23 分钟前
Vue 响应式无限递归问题总结
前端·javascript·vue.js
lsx20240627 分钟前
JavaScript Math(算数)详解
开发语言
csbysj202039 分钟前
Debian Docker 安装指南
开发语言
ShineWinsu43 分钟前
对于模拟实现C++list类的详细解析—上
开发语言·数据结构·c++·算法·面试·stl·list
Mr YiRan44 分钟前
C++语言类中各个重要函数原理
java·开发语言·c++
chilavert3181 小时前
技术演进中的开发沉思-370:final 关键字(上)
java·开发语言
遇见你的雩风1 小时前
【Golang】--- Channel
开发语言·golang
zlpzpl1 小时前
Java总结进阶之路 (基础二 )
java·开发语言·python