怎样使用LocalStorage存储数据_它有什么限制_网络技术

怎样使用LocalStorage存储数据_它有什么限制

发布时间 - 2025-12-26 00:00:00 点击率：次

LocalStorage 是浏览器提供的同源字符串持久化存储，容量约5–10MB；需用 setItem/getItem/removeItem 操作，存对象须 JSON 序列化，不支持敏感信息、跨域及自动过期。

LocalStorage 是浏览器提供的一种简单持久化存储方式，适合存少量字符串数据，比如用户偏好、表单草稿、登录状态标识等。它不随页面刷新丢失，但仅限同源（相同协议、域名、端口）访问，且只能存字符串。

如何使用 LocalStorage 存储和读取数据

所有操作都通过 window.localStorage 对象完成，主要方法有三个：

存数据：用 setItem(key, value)，value 会自动转成字符串。例如：
localStorage.setItem('theme', 'dark');
取数据：用 getItem(key)，返回字符串或 null（键不存在时）。例如：
const theme = localStorage.getItem('theme'); // "dark"
删数据：用 removeItem(key) 删除单个键，或 clear() 清空全部。

注意：如果要存对象或数组，必须先用 JSON.stringify() 转字符串；读取时再用 JSON.parse() 还原，否则会得到 [object Object] 这类无效结果。

LocalStorage 的主要限制

容量有限：多数浏览器限制在 5–10 MB 左右（按字符串长度算），超出会抛出 QuotaExceededError 异常。
只能存字符串：不支持直接存数字、布尔值、对象、函数等，必须手动序列化和反序列化。
同步阻塞操作：读写都在主线程进行，大数据量可能卡住页面（虽然日常使用几乎感觉不到）。
无过期机制：数据永久存在，除非手动清除或用户清缓存。不能像 Cookie 那样设有效期。
不参与网络请求：服务器完全无法访问 LocalStorage，它纯属前端本地存储，和后端无关。

什么情况下不适合用 LocalStorage

需要存敏感信息（如 token、密码），因为 XSS 攻击可直接读取——应优先用 httpOnly Cookie + 后端校验。
数据量较大（如日志、图片 base64），容易超限且影响性能。
需要跨域共享（不同子域名或协议间），它严格遵循同源策略，iframe 或跨域页面无法互通。
要求事件通知（如一个标签页改了数据，另一个自动响应），LocalStorage 本身不触发事件，需配合 storage 事件监听（但仅对其他窗口生效，当前窗口修改不会触发自身）。

小技巧：安全又方便的封装建议

可以简单封装一层，自动处理 JSON 转换和异常：

const storage = {
  set(key, value) {
    try {
      localStorage.setItem(key, JSON.stringify(value));
    } catch (e) {
      console.warn('LocalStorage 写入失败:', e);
    }
  },
  get(key) {
    const str = localStorage.getItem(key);
    try {
      return str ? JSON.parse(str) : null;
    } catch (e) {
      return str; // 解析失败就返回原始字符串
    }
  }
};

这样调用更直观：storage.set('user', { id: 123, name: 'Alice' });，读取也自动还原对象。

# js # 前端 # json # cookie # 大数据 # 浏览器 # 端口 # 后端 # win # 跨域 # 持久化存储 # xss # Object # NULL # 封装

相关栏目：【网站优化151355 】【网络推广146373 】【网络技术251813 】【 AI营销90571 】

上一篇：ASP.NET MVC中SignalR的简单应用

下一篇：linux u盘拷贝文件怎么打开

相关栏目网站优化
网络推广
网络技术
AI营销

最新文章 Sublime怎么一键压缩JS代码 Su sublime如何在搜索中使用正则表达式 Sublime如何设置透明窗口效果 Su mysql如何设计商品表结构_mysql css属性背景图不显示怎么办_通过检查路如何使用Golang实现排序_Golan 农历闰月是怎么回事_为合回归年加一月调整塑造《刺客信条》艾吉奥传奇的编剧离开育碧 1英里等于多少公里 1mile和km的换 css grid布局中行和列是如何定义的 PS批量旋转和翻转图片，快速校正图片方向 C# Swagger UI自定义方法 C OPPO手机九宫格和全键盘怎么切换_OP Go语言如何实现用户登录注册_Golan 1节飞行速度多少公里每小时 1节是多少公纸嫁衣8千子树第五章庙门怎么开启庙门 Laravel 多行数据编辑表单中实现逐明日之后如何提升钓鱼等级明日之后提升钓支付宝怎样查年度账单_支付宝年度账单查看 C# 多线程UI更新Dispatcher

上一篇：ASP.NET MVC中SignalR的简单应用

下一篇：linux u盘拷贝文件怎么打开