JavaScript中读写localStorage的操作指南

更新时间：2026年02月07日 08:28:25 作者：detayun

localStorage是Web Storage API的一部分,它提供了一种简单的方式在浏览器中存储键值对数据,本文将详细介绍如何使用JavaScript操作localStorage,希望对大家有所帮助

引言

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

什么是localStorage

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

主要特点：

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

基本API方法

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

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

写入数据到localStorage

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

注意事项：

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

从localStorage读取数据

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

// 获取字符串
const username = localStorage.getItem('username');
console.log(username); // 输出: john_doe

// 获取数字（需要转换回数字类型）
const age = parseInt(localStorage.getItem('age'), 10);
console.log(age); // 输出: 30

// 获取对象（需要解析JSON字符串）
const storedUser = JSON.parse(localStorage.getItem('user'));
console.log(storedUser.name); // 输出: John

处理不存在的键：

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

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

删除数据

删除特定项

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

localStorage.removeItem('username');

清空所有数据

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

localStorage.clear();

实用技巧

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

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

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

// 存储数据
function saveToLocalStorage(key, value) {
  try {
    const serializedValue = typeof value === 'object' ? JSON.stringify(value) : value;
    localStorage.setItem(key, serializedValue);
  } catch (error) {
    console.error('保存到localStorage失败:', error);
  }
}

// 获取数据
function getFromLocalStorage(key) {
  try {
    const value = localStorage.getItem(key);
    if (value === null) return null;
    
    try {
      return JSON.parse(value);
    } catch (e) {
      return value; // 如果不是JSON字符串，返回原始值
    }
  } catch (error) {
    console.error('从localStorage获取数据失败:', error);
    return null;
  }
}

// 使用示例
saveToLocalStorage('theme', 'dark');
saveToLocalStorage('settings', { fontSize: 16, color: 'blue' });

console.log(getFromLocalStorage('theme')); // 输出: dark
console.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. 记住用户主题偏好

// 保存主题偏好
function setTheme(theme) {
  localStorage.setItem('theme', theme);
  document.documentElement.className = theme; // 应用主题
}

// 获取主题偏好
function getTheme() {
  const theme = localStorage.getItem('theme') || 'light'; // 默认浅色主题
  document.documentElement.className = theme;
  return theme;
}

// 初始化
getTheme();

2. 购物车实现

// 添加商品到购物车
function addToCart(productId, quantity) {
  let cart = getFromLocalStorage('cart') || {};
  
  if (cart[productId]) {
    cart[productId] += quantity;
  } else {
    cart[productId] = quantity;
  }
  
  saveToLocalStorage('cart', cart);
}

// 从购物车移除商品
function removeFromCart(productId) {
  let cart = getFromLocalStorage('cart') || {};
  
  if (cart[productId]) {
    delete cart[productId];
    saveToLocalStorage('cart', cart);
  }
}

// 获取购物车商品数量
function getCartCount() {
  const cart = getFromLocalStorage('cart') || {};
  return Object.values(cart).reduce((total, quantity) => total + quantity, 0);
}

安全考虑

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

性能优化

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

浏览器兼容性

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

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

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

总结

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

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

到此这篇关于JavaScript中读写localStorage的操作指南的文章就介绍到这了,更多相关JavaScript读写localStorage内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

Js利用console计算代码运行时间的方法示例
最近看了一本书，发现了个计算代码执行时间的方法，感觉还挺有用的，所以这篇文章主要给大家介绍了关于Javascript利用console计算代码运行时间的相关资料，文中通过示例代码介绍的非常详细，需要的朋友可以参考下。
2017-09-09
使用bootstrap莫名其妙出现横向滚动条的问题及解决
这篇文章主要介绍了使用bootstrap莫名其妙出现横向滚动条的问题及解决，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-11-11
原生js实现轮播图
这篇文章主要为大家详细介绍了原生js实现轮播图的相关资料，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2017-02-02
lazyload.js详解(推荐)
lazyload.js用于长页面图片的延迟加载，视口外的图片会在窗口滚动到它的位置时再进行加载，这是与预加载相反的，这篇文章主要介绍了lazyload.js详解,需要的朋友可以参考下
2022-09-09
微信公众平台获取access_token的方法步骤
这篇文章主要介绍了微信公众平台获取access_token的方法步骤,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2019-03-03
通用的javascript　换行色换列色的小js
通用的javascript　换行色换列色的小js...
2007-04-04
前端中骨架屏的三种运用方式介绍
这篇文章主要为大家详细介绍了前端中骨架屏的三种运用方式,文中的示例代码讲解详细,具有一定的借鉴价值,感兴趣的小伙伴可以跟随小编一起学习一下
2025-05-05
简单的JS轮播图代码
这篇文章主要介绍了简单的JS轮播图实现方法，代码简单易懂，非常不错，具有参考借鉴价值,需要的朋友可以参考下
2016-07-07
js实现的切换面板实例代码
切换面板具备功能：鼠标划过不同的题目会有不同的图片和解说，可以连接到不同的网站，实例代码如下，感兴趣的朋友可以参考下哈
2013-06-06
JavaScript实现表格排序方法
JavaScript实现表格排序方法，需要的朋友可以参考一下
2013-06-06