如何用JavaScript实现本地存储？-js教程-PHP中文网

如何用JavaScript实现本地存储？

狼影

发布： 2025-12-17 21:34:02

原创

998人浏览过

JavaScript本地存储主要使用localStorage和sessionStorage，二者均以字符串键值对形式存储数据，API相同但生命周期不同：localStorage永久保存，sessionStorage仅限当前标签页。

如何用javascript实现本地存储？

JavaScript 本地存储主要靠 localStorage 和 sessionStorage，它们都以键值对（字符串）形式保存数据，操作简单、无需后端参与，适合存用户偏好、表单草稿、登录状态等轻量信息。

基础写法：存、取、删、清空

两者 API 完全一致，区别只在于生命周期：

localStorage：数据永久保存，除非手动清除或代码删除
sessionStorage：仅在当前浏览器标签页有效，关闭标签即丢失

常用方法示例：

// 存储（自动转为字符串）
localStorage.setItem('theme', 'dark');
sessionStorage.setItem('cartCount', '3');

// 读取（返回字符串，注意类型）
const theme = localStorage.getItem('theme'); // 'dark'
const count = sessionStorage.getItem('cartCount'); // '3'

// 删除某一项
localStorage.removeItem('theme');

// 清空全部（谨慎使用）
sessionStorage.clear();

登录后复制

注意数据类型：只能存字符串

数字、对象、布尔值等直接存会自动调用 .toString()，导致意外结果：

立即学习“Java免费学习笔记（深入）”；

localStorage.setItem('age', 25);        // 存的是 '25'，没问题
localStorage.setItem('user', {name: 'Tom'}); // 存的是 '[object Object]'

登录后复制

解决办法：存前用 JSON.stringify()，取后用 JSON.parse()：

极品模板多语言企业网站管理系统1.2.2

【极品模板】出品的一款功能强大、安全性高、调用简单、扩展灵活的响应式多语言企业网站管理系统。产品主要功能如下： 01、支持多语言扩展（独立内容表，可一键复制中文版数据） 02、支持一键修改后台路径； 03、杜绝常见弱口令，内置多种参数过滤、有效防范常见XSS； 04、支持文件分片上传功能，实现大文件轻松上传； 05、支持一键获取微信公众号文章（保存文章的图片到本地服务器）； 06、支持一键

查看详情

const user = { name: 'Tom', active: true };
localStorage.setItem('user', JSON.stringify(user));

const savedUser = JSON.parse(localStorage.getItem('user'));
// → { name: 'Tom', active: true }

登录后复制

建议封装一个安全读写函数，自动处理解析失败：

function safeSet(key, value) {
  try {
    localStorage.setItem(key, JSON.stringify(value));
  } catch (e) {
    console.warn('本地存储失败:', e);
  }
}

function safeGet(key, defaultValue = null) {
  try {
    const str = localStorage.getItem(key);
    return str ? JSON.parse(str) : defaultValue;
  } catch (e) {
    return defaultValue;
  }
}

登录后复制

实用技巧：监听变化 & 判断是否可用

当其他标签页修改了 localStorage，当前页可通过 storage 事件感知（注意：本页触发的变更不会触发本页事件）：

window.addEventListener('storage', (e) => {
  console.log('键', e.key, '从', e.oldValue, '变为', e.newValue);
  if (e.key === 'theme') {
    document.documentElement.setAttribute('data-theme', e.newValue);
  }
});

登录后复制

部分环境（如无痕模式、iOS Safari 某些版本）可能禁用 localStorage，使用前可检测：

function isStorageAvailable() {
  try {
    const test = '__storage_test__';
    localStorage.setItem(test, test);
    localStorage.removeItem(test);
    return true;
  } catch (e) {
    return false;
  }
}

if (isStorageAvailable()) {
  localStorage.setItem('lastVisit', Date.now().toString());
} else {
  console.warn('本地存储不可用，降级处理');
}

登录后复制

基本上就这些。用好 localStorage 和 sessionStorage，能显著提升前端体验，不复杂但容易忽略类型和兼容性细节。

以上就是如何用JavaScript实现本地存储？的详细内容，更多请关注php中文网其它相关文章！