简介
localStorage 是 HTML5 中新增的 Web 存储机制之一，它提供了一个简单的键值存储接口，用于浏览器端存储数据，比如用户偏好设置、购物车信息等。该 API 使用起来非常简单，但是由于其易受 XSS 攻击和数据篡改等安全问题，需要特别注意。
特点
localStorage 与 sessionStorage 类似，但有以下几个不同之处：
- localStorage 存储的数据没有过期时间，即使关闭了浏览器也会一直保留在本地。
- 存储的数据大小通常为 5 MB 到 10 MB，这取决于浏览器类型和版本。
- 存储的数据只能在客户端访问，不能跨域共享。
- 与 cookie 不同，localStorage 不会随每个 HTTP 请求自动发送到服务器。
使用方法
使用 localStorage 非常简单，只需在客户端 JavaScript 中调用 localStorage.setItem(key, value) 方法将数据写入 localStorage 中，或者通过 localStorage.getItem(key) 方法从 localStorage 中读取数据。例如：
-- -------------------- ---- ------- -- ---- ---------------------------- ----------- --------------------------- ------ -- ---- ----- ---- - ----------------------------- ----- --- - ---------------------------- ------------------ -- ------- ----------------- -- --
安全问题
localStorage 易受 XSS 攻击和数据篡改等安全问题，需要特别注意。以下是一些常见的防范措施：
- 阻止跨站脚本攻击（XSS），例如对用户输入进行过滤和转义。
- 使用 HTTPS 协议传输数据，以防止中间人攻击。
- 不要存储敏感信息，例如密码和信用卡号码。
- 对存储的数据进行加密，使其即使被窃取也无法解密。
持续化
由于 localStorage 存储的数据没有过期时间，即使关闭了浏览器也会一直保留在本地。但是，如果用户清除了浏览器缓存或者使用了隐身模式，localStorage 中的数据就会被删除。因此，为了实现 localStorage 的持续化，我们可以将数据备份到服务器端，当用户需要恢复数据时再从服务器端拉取。以下是一个简单的示例代码：
-- -------------------- ---- -------
-- ----------
----- ---------- - -- -- -
----- ---- - -----------------------------
-- -- ---- -----------
---------------- -
------- -------
-------- - --------------- ------------------ --
----- -----
--
---------------- -- ----------------
-------------- -- --------------------
-------------- -- ----------------------
--
-- ---------
----- ----------- - -- -- -
-- -- --- ----------
-----------------
---------------- -- ----------------
------------ -- -
--- ------ --- -- ----- -
------------------------- -----------
-
--
-------------- -- ----------------------
--总结
localStorage 是一种方便的 Web 存储机制，适用于存储一些简单的数据，但需要注意安全问题。为了实现持续化，我们可以将数据备份到服务器端，并在需要时恢复。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/11775
