news 2026/6/15 13:50:50

如何使用JavaScript读写localStorage

作者头像

张小明

前端开发工程师

1.2k 24
文章封面图
如何使用JavaScript读写localStorage

引言

在Web开发中，数据持久化存储是一个常见需求。虽然HTTP协议是无状态的，但现代Web应用经常需要在浏览器端存储一些数据以提升用户体验。localStorage是Web Storage API的一部分，它提供了一种简单的方式在浏览器中存储键值对数据，这些数据不会随着会话结束而消失，除非被显式清除。本文将详细介绍如何使用JavaScript操作localStorage。

什么是localStorage？

localStorage是HTML5引入的Web Storage方案之一，它允许在用户的浏览器中持久化存储字符串数据。与sessionStorage（数据仅在当前会话有效）不同，localStorage中的数据没有过期时间，即使关闭浏览器或重启计算机后，数据仍然存在。

主要特点：

  • 存储容量：通常为5MB左右（不同浏览器可能略有差异）
  • 存储类型：仅支持字符串类型（其他类型需要先转换为字符串）
  • 作用域：同源策略（相同协议、域名和端口）
  • 持久性：数据不会过期，除非手动清除

基本API方法

localStorage提供了几个简单的方法来操作数据：

  1. setItem(key, value)- 存储数据
  2. getItem(key)- 获取数据
  3. removeItem(key)- 删除数据
  4. clear()- 清空所有数据
  5. key(index)- 获取指定索引的key
  6. length- 获取存储的项目数量

写入数据到localStorage

使用setItem()方法可以将数据存储到localStorage中：

// 存储字符串localStorage.setItem('username','john_doe');// 存储数字（会自动转换为字符串）localStorage.setItem('age','30');// 注意这里传入的是字符串// 存储对象（需要先转换为JSON字符串）constuser={name:'John',email:'john@example.com'};localStorage.setItem('user',JSON.stringify(user));

注意事项：

  • 键和值都必须是字符串，其他类型需要先转换
  • 键名不能包含特殊字符或空格（虽然技术上可以，但不推荐）
  • 不同浏览器对存储大小有限制，大量数据可能导致异常

从localStorage读取数据

使用getItem()方法可以获取存储的数据：

// 获取字符串constusername=localStorage.getItem('username');console.log(username);// 输出: john_doe// 获取数字（需要转换回数字类型）constage=parseInt(localStorage.getItem('age'),10);console.log(age);// 输出: 30// 获取对象（需要解析JSON字符串）conststoredUser=JSON.parse(localStorage.getItem('user'));console.log(storedUser.name);// 输出: John

处理不存在的键：

当尝试读取不存在的键时，getItem()会返回null：

constnonExistent=localStorage.getItem('non_existent_key');console.log(nonExistent);// 输出: null

删除数据

删除特定项

使用removeItem()方法删除指定键的数据：

localStorage.removeItem('username');

清空所有数据

使用clear()方法清空所有存储的数据：

localStorage.clear();

实用技巧

1. 检查浏览器是否支持localStorage

if(typeof(Storage)!=='undefined'){// 支持localStoragelocalStorage.setItem('test','support');}else{// 不支持localStorageconsole.error('您的浏览器不支持localStorage');}

2. 使用封装函数简化操作

// 存储数据functionsaveToLocalStorage(key,value){try{constserializedValue=typeofvalue==='object'?JSON.stringify(value):value;localStorage.setItem(key,serializedValue);}catch(error){console.error('保存到localStorage失败:',error);}}// 获取数据functiongetFromLocalStorage(key){try{constvalue=localStorage.getItem(key);if(value===null)returnnull;try{returnJSON.parse(value);}catch(e){returnvalue;// 如果不是JSON字符串，返回原始值}}catch(error){console.error('从localStorage获取数据失败:',error);returnnull;}}// 使用示例saveToLocalStorage('theme','dark');saveToLocalStorage('settings',{fontSize:16,color:'blue'});console.log(getFromLocalStorage('theme'));// 输出: darkconsole.log(getFromLocalStorage('settings'));// 输出: { fontSize: 16, color: 'blue' }

3. 监听storage事件

当同源下的其他标签页修改了localStorage时，可以监听storage事件：

window.addEventListener('storage',(event)=>{console.log('Storage事件触发:',event);console.log('键:',event.key);console.log('旧值:',event.oldValue);console.log('新值:',event.newValue);console.log('URL:',event.url);});

实际应用示例

1. 记住用户主题偏好

// 保存主题偏好functionsetTheme(theme){localStorage.setItem('theme',theme);document.documentElement.className=theme;// 应用主题}// 获取主题偏好functiongetTheme(){consttheme=localStorage.getItem('theme')||'light';// 默认浅色主题document.documentElement.className=theme;returntheme;}// 初始化getTheme();

2. 购物车实现

// 添加商品到购物车functionaddToCart(productId,quantity){letcart=getFromLocalStorage('cart')||{};if(cart[productId]){cart[productId]+=quantity;}else{cart[productId]=quantity;}saveToLocalStorage('cart',cart);}// 从购物车移除商品functionremoveFromCart(productId){letcart=getFromLocalStorage('cart')||{};if(cart[productId]){deletecart[productId];saveToLocalStorage('cart',cart);}}// 获取购物车商品数量functiongetCartCount(){constcart=getFromLocalStorage('cart')||{};returnObject.values(cart).reduce((total,quantity)=>total+quantity,0);}

安全考虑

  1. 敏感数据：不要在localStorage中存储敏感信息，如密码、令牌等，因为数据可以被用户轻易查看和修改
  2. XSS攻击：确保存储的数据经过适当清理，防止XSS攻击
  3. 数据验证：从localStorage读取数据后总是进行验证，因为用户可以修改这些数据

性能优化

  1. 批量操作：频繁的localStorage操作可能影响性能，考虑批量处理
  2. 避免大型对象：localStorage不是为存储大量数据设计的，考虑使用IndexedDB处理大量结构化数据
  3. 同步操作：localStorage是同步API，大量操作可能阻塞主线程

浏览器兼容性

localStorage在现代浏览器中得到了广泛支持，包括：

  • Chrome 4+
  • Firefox 3.5+
  • IE 8+
  • Edge 12+
  • Safari 4+
  • Opera 10.5+

对于非常旧的浏览器，可以考虑使用polyfill或降级方案。

总结

localStorage提供了一种简单有效的方式在浏览器中持久化存储数据。通过掌握其基本API和最佳实践，你可以轻松实现各种功能，如用户偏好设置、临时数据存储等。记住要处理数据类型转换、错误情况和浏览器兼容性，以确保你的应用在不同环境下都能正常工作。

对于更复杂的数据存储需求，可以考虑使用IndexedDB或结合服务器端存储，但对于大多数简单的客户端存储需求，localStorage是一个理想的选择。

版权声明: 本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若内容造成侵权/违法违规/事实不符，请联系邮箱：809451989@qq.com进行投诉反馈，一经查实，立即删除！
网站建设 2026/6/15 11:35:49

mask-rcnn_hrnetv2p-w32-1x_coco：腰果质量分级与缺陷检测的深度学习实践指南

1. mask-rcnn_hrnetv2p-w32-1x_coco：腰果质量分级与缺陷检测的深度学习实践指南 在农产品质量检测领域，腰果作为一种重要的经济作物，其品质直接关系到市场价值和消费者满意度。传统的腰果质量检测方法主要依赖人工目测，存在效率低…

作者头像 李华
网站建设 2026/6/10 10:07:11

SEW变频器MCS40A0150-203-4-00 08273057

孙13665068812SEW变频器MCS40A0150-203-4-00 08273057技术详解一、产品定位与技术特性该型号属于SEW EURODRIVE MCS系列智能变频器，专为工业自动化场景设计。核心参数如下：额定功率：1.5kW（型号0150标识）输入电压&#…

作者头像 李华
网站建设 2026/6/15 2:01:30

30. 异步和多线程

1.异步和多线程简介 2.IOCP 3.await后代码执行的线程1.异步和多线程简介 a.多线程: 像是你同时请了多个工人(线程)干活, 每个工人独立执行自己的任务, CPU需要在这些工人之间切换调度; 这是并发执行的一种实现方式b.异步: 是一种编程模式/思想, 核心是"非阻塞" —— …

作者头像 李华
网站建设 2026/6/15 13:48:42

java+vue基于springboot的汽车路试数据管理系统设计与实现_9859us78

目录系统概述技术架构核心功能模块创新点应用价值开发技术源码文档获取/同行可拿货,招校园代理 ：文章底部获取博主联系方式！系统概述 该系统基于SpringBoot后端框架与Vue前端框架开发，旨在实现汽车路试数据的数字化管理。系统整合了车辆传感…

作者头像 李华
网站建设 2026/6/15 13:43:24

2分钟，生成你的数字分身：华为云数字人解锁企业高效未来

在数字化浪潮席卷各行各业的今天，企业如何以更低成本、更高效率实现数字化转型？华为云数字人给出了一个令人惊叹的答案——依托盘古大模型赋能，仅需2分钟视频素材，即可生成高度仿真的数字分身，为企业生产力带来革新性突…

作者头像 李华
网站建设 2026/6/15 11:41:57

利用Simulink验证Dual Extended Kalman Filter（DEKF）

【主题】利用Simulink对Dual Extended Kalman Filter（DEKF）进行验证。 【方式】主卡尔曼滤波器用来估计锂电池的SOC和端电压，辅助卡尔曼滤波器用来估计锂电池的内阻R0。 【电路模型】锂电池采用二阶等效电路模型。 【效果】SOC最大误差为1.07…

作者头像 李华