0

0

JS中的localStorage怎么用?能存什么?

尼克

尼克

发布时间:2025-06-09 22:54:05

|

674人浏览过

|

来源于php中文网

原创

localstorage 是 js 中用于持久化存储字符串数据的工具,即使页面刷新或浏览器关闭也不会丢失。它仅支持字符串类型,存储对象或数组时需先用 json.stringify() 转换,读取时用 json.parse() 还原。1. 存数据用 setitem(key, value);2. 取数据用 getitem(key);3. 删数据用 removeitem(key);4. 清空用 clear();5. 查看 key 用 key(index)。适合存用户偏好、静态缓存等非敏感信息,不适合频繁修改或敏感数据。使用时需注意:必须手动转换数据类型、避免超限、不可跨域共享、频繁读写影响性能,建议结合默认值处理以提高健壮性。

JS中的localStorage怎么用?能存什么?

localStorage 是 JS 里用来做本地存储的一个工具,简单又实用。它能存字符串数据,即使页面刷新或者浏览器关闭了,数据也不会丢。关键在于怎么用对地方,别乱用。


localStorage 能存什么?

localStorage 只支持字符串类型的数据。如果你要存对象、数组、数字这些,得先转成字符串。最常用的方法就是 JSON.stringify()

比如:

const user = { name: "Tom", age: 25 };
localStorage.setItem("user", JSON.stringify(user));

反过来取的时候要用 JSON.parse() 把字符串还原回来:

const storedUser = JSON.parse(localStorage.getItem("user"));

别想着存函数或者 undefined,那些会被忽略或者出错。


基本操作:增删改查

localStorage 的 API 很简单,就几个方法:

全诚商城生成HTML多用户版
全诚商城生成HTML多用户版

1、什么是店中店?店中店是全诚商多用户版的一大特色,它既是独立的个体,又具有群集功能。我们做个例子说明:假设尊贵的您现实生活中租赁了一个店面,店面空间很大,您可以把您的店面分割成很多独立空间再向别人转租,这样您可以额外获得一部分租赁费用收入,借以减少你的个人租赁费用投入,还能起到活跃销售场所的气氛,俗话说:货卖一堆吗。你租赁的店面可以完全分割成很多空间向外转租,也可以自己保留一块空间为自己销售商品

下载
  • 存数据:localStorage.setItem(key, value)
  • 取数据:localStorage.getItem(key)
  • 删数据:localStorage.removeItem(key)
  • 清空所有:localStorage.clear()
  • 查看 key:localStorage.key(index)(用于遍历)

举个例子:

localStorage.setItem("theme", "dark");
console.log(localStorage.getItem("theme")); // 输出 "dark"
localStorage.removeItem("theme");

注意:虽然操作起来像对象赋值一样方便,但它是同步的,不能异步操作,大数据量可能会卡界面。


什么时候适合用 localStorage?

  • 需要持久化保存用户偏好,比如主题、语言设置。
  • 存 token 或登录状态信息(不过要注意安全问题)。
  • 做缓存,减少重复请求,比如一些静态配置数据。
  • 不适合频繁变动的数据,也不适合敏感信息(因为是明文存储)。

如果只是临时用一下,可以用 sessionStorage,关掉标签页就自动清了。


使用时容易踩的坑

  • 忘记转字符串:直接塞对象进去会变成 [object Object]
  • 超过容量限制:主流浏览器一般是 5MB 左右,超了会报错。
  • 跨域不共享:不同域名下的 localStorage 是隔离的,子域名也不行。
  • 读写频繁影响性能:特别是循环里面频繁 setItem,尽量合并操作。

建议在存之前判断是否存在,取值之后也最好做下默认值处理:

const theme = localStorage.getItem("theme") || "default";

基本上就这些。localStorage 用起来不难,但要注意场景和规范,别滥用就行。

热门AI工具

更多
DeepSeek
DeepSeek

幻方量化公司旗下的开源大模型平台

豆包大模型
豆包大模型

字节跳动自主研发的一系列大型语言模型

通义千问
通义千问

阿里巴巴推出的全能AI助手

腾讯元宝
腾讯元宝

腾讯混元平台推出的AI助手

文心一言
文心一言

文心一言是百度开发的AI聊天机器人,通过对话可以生成各种形式的内容。

讯飞写作
讯飞写作

基于讯飞星火大模型的AI写作工具,可以快速生成新闻稿件、品宣文案、工作总结、心得体会等各种文文稿

即梦AI
即梦AI

一站式AI创作平台,免费AI图片和视频生成。

ChatGPT
ChatGPT

最最强大的AI聊天机器人程序,ChatGPT不单是聊天机器人,还能进行撰写邮件、视频脚本、文案、翻译、代码等任务。

相关专题

更多
json数据格式
json数据格式

JSON是一种轻量级的数据交换格式。本专题为大家带来json数据格式相关文章,帮助大家解决问题。

418

2023.08.07

json是什么
json是什么

JSON是一种轻量级的数据交换格式,具有简洁、易读、跨平台和语言的特点,JSON数据是通过键值对的方式进行组织,其中键是字符串,值可以是字符串、数值、布尔值、数组、对象或者null,在Web开发、数据交换和配置文件等方面得到广泛应用。本专题为大家提供json相关的文章、下载、课程内容,供大家免费下载体验。

535

2023.08.23

jquery怎么操作json
jquery怎么操作json

操作的方法有:1、“$.parseJSON(jsonString)”2、“$.getJSON(url, data, success)”;3、“$.each(obj, callback)”;4、“$.ajax()”。更多jquery怎么操作json的详细内容,可以访问本专题下面的文章。

311

2023.10.13

go语言处理json数据方法
go语言处理json数据方法

本专题整合了go语言中处理json数据方法,阅读专题下面的文章了解更多详细内容。

77

2025.09.10

数据类型有哪几种
数据类型有哪几种

数据类型有整型、浮点型、字符型、字符串型、布尔型、数组、结构体和枚举等。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

309

2023.10.31

php数据类型
php数据类型

本专题整合了php数据类型相关内容,阅读专题下面的文章了解更多详细内容。

222

2025.10.31

登录token无效
登录token无效

登录token无效解决方法:1、检查token的有效期限,如果token已经过期,需要重新获取一个新的token;2、检查token的签名,如果签名不正确,需要重新获取一个新的token;3、检查密钥的正确性,如果密钥不正确,需要重新获取一个新的token;4、使用HTTPS协议传输token,建议使用HTTPS协议进行传输 ;5、使用双因素认证,双因素认证可以提高账户的安全性。

6168

2023.09.14

登录token无效怎么办
登录token无效怎么办

登录token无效的解决办法有检查Token是否过期、检查Token是否正确、检查Token是否被篡改、检查Token是否与用户匹配、清除缓存或Cookie、检查网络连接和服务器状态、重新登录或请求新的Token、联系技术支持或开发人员等。本专题为大家提供token相关的文章、下载、课程内容,供大家免费下载体验。

817

2023.09.14

俄罗斯Yandex引擎入口
俄罗斯Yandex引擎入口

2026年俄罗斯Yandex搜索引擎最新入口汇总,涵盖免登录、多语言支持、无广告视频播放及本地化服务等核心功能。阅读专题下面的文章了解更多详细内容。

158

2026.01.28

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
如何进行WebSocket调试
如何进行WebSocket调试

共1课时 | 0.1万人学习

TypeScript全面解读课程
TypeScript全面解读课程

共26课时 | 5.1万人学习

前端工程化(ES6模块化和webpack打包)
前端工程化(ES6模块化和webpack打包)

共24课时 | 5.1万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号