前端Wiki/HTML5/深入/Web Storage

localStorage

localStorage 提供"键值对"形式的持久存储：数据存在用户浏览器里，关闭浏览器、重启电脑都还在，除非代码删除或用户手动清除。容量约 5MB，远超 Cookie 的 4KB，而且不会随每次请求发给服务器，是存业务数据（主题偏好、草稿、令牌）的正确选择。

四个核心方法：setItem(key, value) 写入、getItem(key) 读取（不存在返回 null）、removeItem(key) 删除、clear() 清空本站全部。还有 key(i) 按序号取键名、length 取条数。

两条纪律：值只能是字符串，存对象必须 JSON.stringify，取出来 JSON.parse，否则会变成 "[object Object]"；localStorage 按"源"（协议+域名+端口）隔离，A 网站读不到 B 网站的数据，同一网站的 http 和 https 也算不同源。

本节要点localStorage 持久存储、约 5MB、按源隔离；值只能是字符串，对象要走 JSON 转换；set/get/remove/clear 四方法够用大部分场景。

JavaScript

// 写入：键和值都必须是字符串
localStorage.setItem('theme', 'dark');
localStorage.setItem('user', JSON.stringify({ name: '小明', age: 18 }));

// 读取：不存在的键返回 null
var theme = localStorage.getItem('theme');              // 'dark'
var user = JSON.parse(localStorage.getItem('user'));    // 对象要 parse
console.log(user.name);                                 // '小明'

// 删除
localStorage.removeItem('theme');   // 删单个键
// localStorage.clear();            // 清空本站全部（慎用）

// 遍历所有键
for (var i = 0; i < localStorage.length; i++) {
  var k = localStorage.key(i);
  console.log(k, '=', localStorage.getItem(k));
}

📚 推荐阅读

ECharts 图表教程万象云档

PWA 应用实战万象云档

移动前端开发经验指南万象云档

Socket.IO v4 中文文档万象云档

Electron 27 中文文档万象云档

来自万象云档的免费在线书籍，点击封面直接阅读