HTML5 Web Storage：`localStorage` 与 `sessionStorage` 的高级应用

HTML5 Web Storage：本地小仓库，大有可为！

话说，咱们每天冲浪互联网，浏览各种网页，有没有想过，那些网站是怎么记住你的喜好的？比如你上次浏览的商品，或者你登录后的状态，难道每次都重新问你一遍吗？当然不是啦！这背后，藏着一些小秘密，而今天我们要聊的就是其中一个关键角色：HTML5 Web Storage，尤其是它的两个好兄弟：localStorage 和 sessionStorage。

Web Storage：浏览器里的“小本本”

你可以把 Web Storage 想象成浏览器自带的小本本，网站可以往里面写东西，也可以从里面读取东西。这个“小本本”就存在你的电脑里，不用每次都跑到服务器去问，速度快多了。而且，它比以前的 Cookie 强大多了，容量更大，用起来也更方便。

Web Storage 主要分为两种：localStorage 和 sessionStorage。它们都是键值对的形式存储数据，就像一个简单的字典一样。你可以用一个“键”来存储一个“值”，以后用这个“键”就能找到对应的值了。

localStorage：持久的记忆，像个老朋友

localStorage，顾名思义，是“本地存储”。它的特点是 持久性。也就是说，只要你不主动删除，或者清除浏览器缓存，它就会一直存在。就像你小时候最喜欢的那颗糖，只要你不吃掉，它就永远在那里等着你。

想象一下，你正在做一个在线购物网站，用户把一些商品加入了购物车，但是还没来得及结算就关闭了浏览器。如果用 localStorage 来存储购物车数据，下次用户再打开网站，购物车里的商品依然还在，是不是很贴心？

sessionStorage：短暂的邂逅，像个过客

sessionStorage，是“会话存储”。它的特点是 会话性。也就是说，只有在当前会话（session）有效的时候，它才会存在。简单来说，就是你打开一个浏览器窗口，就算一个会话。关闭这个窗口，sessionStorage 里的数据就消失了。就像你在酒吧里遇到的一个陌生人，聊得很开心，但离开酒吧，可能就再也不会相遇了。

举个例子，你可以用 sessionStorage 来存储用户在某个页面上的临时状态，比如用户填写的表单数据。如果用户不小心刷新了页面，sessionStorage 里的数据还在，用户不用重新填写。但如果用户关闭了浏览器，数据就没了，这样可以避免一些敏感信息被永久存储。

localStorage 和 sessionStorage 的爱恨情仇：区别在哪里？

说了这么多，localStorage 和 sessionStorage 到底有什么区别呢？我们可以用一张表格来总结一下：

特性	`localStorage`	`sessionStorage`
生命周期	永久，除非手动删除或清除浏览器缓存	仅在当前会话有效，关闭浏览器窗口即失效
作用域	同源的所有窗口共享	同源的当前窗口或标签页共享
用途	存储长期需要的数据，如用户偏好设置	存储临时性的数据，如表单数据、会话状态

Web Storage 的基本用法：增删改查，样样精通

好了，理论知识讲了不少，现在让我们来看看 Web Storage 怎么用。其实很简单，就像操作一个对象一样。

存储数据 (setItem)

// localStorage
localStorage.setItem('username', 'Alice');
localStorage.setItem('theme', 'dark');

// sessionStorage
sessionStorage.setItem('currentPage', '/home');
sessionStorage.setItem('isLoggedIn', 'true');

就像往小本本上写东西一样，第一个参数是“键”，第二个参数是“值”。

读取数据 (getItem)

// localStorage
let username = localStorage.getItem('username'); // 返回 "Alice"
let theme = localStorage.getItem('theme'); // 返回 "dark"

// sessionStorage
let currentPage = sessionStorage.getItem('currentPage'); // 返回 "/home"
let isLoggedIn = sessionStorage.getItem('isLoggedIn'); // 返回 "true"

就像从小本本上查找东西一样，传入“键”，就能找到对应的值。如果找不到，会返回 null。

删除数据 (removeItem)
```
// localStorage
localStorage.removeItem('username');

// sessionStorage
sessionStorage.removeItem('currentPage');
```
就像把小本本上的某条记录划掉一样，传入“键”，就能删除对应的数据。

清空所有数据 (clear)

// localStorage
localStorage.clear(); // 清空 localStorage 里所有的数据

// sessionStorage
sessionStorage.clear(); // 清空 sessionStorage 里所有的数据

就像把整个小本本都擦干净一样，慎用！

获取存储的数据量 (length)

// localStorage
let localStorageLength = localStorage.length; // 返回 localStorage 中存储的数据条数

// sessionStorage
let sessionStorageLength = sessionStorage.length; // 返回 sessionStorage 中存储的数据条数

可以知道小本本里记了多少东西。

高级应用：让你的网站更智能、更人性化

Web Storage 的基本用法很简单，但它的潜力是无限的。我们可以利用它来实现很多有趣的功能，让你的网站更智能、更人性化。

记住用户的偏好设置

比如，用户选择了“深色主题”，下次打开网站，还是深色主题；用户调整了字体大小，下次打开网站，字体大小还是用户上次设置的大小。这些都可以用 localStorage 来实现。

// 保存主题
function saveTheme(theme) {
    localStorage.setItem('theme', theme);
    document.body.className = theme; // 设置 body 的 class，应用不同的 CSS 样式
}

// 加载主题
function loadTheme() {
    let theme = localStorage.getItem('theme');
    if (theme) {
        document.body.className = theme;
    } else {
        // 默认主题
        document.body.className = 'light';
    }
}

// 在页面加载时调用
window.onload = loadTheme;

记住用户的登录状态

用户登录后，我们可以把用户的登录信息存储在 localStorage 里，下次用户打开网站，自动登录，不用重新输入账号密码。

注意： 虽然这种方式很方便，但是也存在安全风险。如果用户使用公共电脑，或者电脑被其他人使用，他们的账号可能会被盗用。因此，在存储敏感信息时，一定要谨慎，可以考虑使用加密算法对数据进行加密。也可以考虑token的方式，过期时间设置长一点。
```
// 登录成功后保存用户信息
function saveUserInfo(username, token) {
    localStorage.setItem('username', username);
    localStorage.setItem('token', token);
}

// 检查用户是否已登录
function isLoggedIn() {
    let username = localStorage.getItem('username');
    let token = localStorage.getItem('token');
    return username && token;
}

// 登出
function logout() {
    localStorage.removeItem('username');
    localStorage.removeItem('token');
}
```
离线存储数据

有些网站需要在离线状态下也能使用，比如阅读器、笔记应用等。我们可以把一些数据存储在 localStorage 里，这样即使没有网络，用户也能访问这些数据。当然，这种方式适合存储一些静态数据，或者不经常更新的数据。
购物车数据

前面已经提到了，用 localStorage 存储购物车数据，可以提高用户体验。即使关闭浏览器，购物车里的商品也不会丢失。

存储用户浏览历史

可以记录用户浏览过的页面，方便用户返回。

function addHistory(url) {
    let history = localStorage.getItem('history');
    if (history) {
        history = JSON.parse(history); // 将 JSON 字符串转换为数组
    } else {
        history = [];
    }
    history.push(url); // 添加到数组末尾
    localStorage.setItem('history', JSON.stringify(history)); // 将数组转换为 JSON 字符串
}

// 在每个页面加载时调用
addHistory(window.location.href);

注意： 浏览历史可能会泄露用户的隐私，因此需要谨慎使用。

Web Storage 的一些注意事项：别掉进坑里！

虽然 Web Storage 很强大，但是在使用过程中，也需要注意一些问题，避免掉进坑里。

容量限制

Web Storage 的容量是有限的，一般来说，每个域名下可以存储 5MB 的数据。虽然比 Cookie 大多了，但是也不能无限存储。因此，在存储数据时，要尽量精简，避免存储不必要的数据。
安全性问题

Web Storage 存储的数据是明文的，因此不要存储敏感信息，比如用户的密码、银行卡号等。如果一定要存储敏感信息，可以使用加密算法对数据进行加密。
同源策略

Web Storage 受同源策略的限制，只有同源的网页才能访问彼此的数据。也就是说，如果你的网站和用户的网站不是同一个域名，就无法访问用户的 Web Storage 数据。
性能问题

虽然 Web Storage 的速度很快，但是如果存储大量数据，也会影响性能。因此，在存储数据时，要尽量避免存储大量的数据。
浏览器兼容性

Web Storage 是 HTML5 的一部分，现代浏览器都支持它。但是，一些老旧的浏览器可能不支持 Web Storage。因此，在使用 Web Storage 时，需要进行兼容性判断。
```
if (typeof(Storage) !== "undefined") {
    // 支持 Web Storage
    // 你的代码
} else {
    // 不支持 Web Storage
    // 给出提示，或者使用其他方案
}
```

总结：Web Storage，前端开发的瑞士军刀

总而言之，HTML5 Web Storage 是一个非常强大的工具，可以用来存储各种数据，提高用户体验，让你的网站更智能、更人性化。但是，在使用过程中，也要注意一些问题，避免掉进坑里。希望这篇文章能让你对 Web Storage 有更深入的了解，并在你的前端开发工作中发挥它的作用。记住，就像瑞士军刀一样，Web Storage 功能强大，但也要用得其所，才能发挥最大的价值！掌握了它，你就能在前端开发的世界里更上一层楼啦！

HTML5 Web Storage：本地小仓库，大有可为！

发表回复 取消回复

发表回复取消回复