HTML5详解（三）

Web 存储

随着互联网的快速发展，基于网页的应用越来越普遍，同时也变的越来越复杂，为了满足各种各样的需求，会经常在在本地存储大量的数据，传统方式我们以document.cookie来进行存储的。但是由于其存储大小只有4k左右，并且解析也相当的复杂，给开发带来诸多不便，HTML5规范则提出解决方案。

H5 中有两种存储的方式

1. window.sessionStorage 会话存储:

   • 保存在内存中。
   • 生命周期为关闭浏览器窗口。也就是说，当窗口关闭时数据销毁。
   • 在同一个窗口下数据可以共享。

2. window.localStorage 本地存储:

   • 有可能保存在浏览器内存里，有可能在硬盘里。
   • 永久生效，除非手动删除（比如清理垃圾的时候）。
   • 可以多窗口共享。

Web 存储的特性

(1) 设置、读取方便。

(2) 容量较大，sessionStorage 约5M、localStorage 约20M。

(3) 只能存储字符串，可以将对象 JSON.stringify() 编码后存储。

Web 存储的 API

localStorage 和 sessionStorage 的 API 相同

setItem(key, value)    // 设置存储内容
getItem(key)           // 读取存储内容
removeItem(key)        // 删除键值为key的存储内容
clear()                // 清空所有存储内容
key(n)                 // 以索引值来获取存储内容

代码示例

// 存储
localStorage.setItem("name", "张三");

// 读取
console.log(localStorage.getItem("name"));  // 张三

// 删除
localStorage.removeItem("name");

// 清空
localStorage.clear();

存储复杂数据类型

由于 Web 存储只能存储字符串，如果要存储复杂数据类型，需要先将其转换为字符串。

// 存储对象
const user = {
    name: "张三",
    age: 25,
    skills: ["HTML", "CSS", "JavaScript"]
};

// 将对象转换为字符串
localStorage.setItem("user", JSON.stringify(user));

// 读取并转换回对象
const storedUser = JSON.parse(localStorage.getItem("user"));
console.log(storedUser.name);  // 张三
console.log(storedUser.skills);  // ["HTML", "CSS", "JavaScript"]

localStorage 和 sessionStorage 的区别

特性	localStorage	sessionStorage
生命周期	永久，除非手动删除	关闭浏览器窗口后销毁
存储大小	约20MB	约5MB
共享范围	同一域名下的所有页面	同一窗口下的页面

Web 存储的应用场景

localStorage 的应用场景

1. 保存用户偏好设置：如网站主题、字体大小等
2. 存储购物车信息：用户添加的商品可以保存，即使关闭浏览器
3. 缓存静态资源：减少服务器请求，提高页面加载速度
4. 存储用户填写的表单数据：防止用户意外关闭页面导致数据丢失

sessionStorage 的应用场景

1. 表单向导：在多个页面收集用户信息
2. 一次性登录信息：仅在当前会话有效的认证信息
3. 临时存储页面状态：如滚动位置、展开/折叠状态等
4. 防止重复提交：存储已提交的数据，避免用户刷新页面重复提交

Web 存储的安全性

Web 存储虽然方便，但也存在一些安全风险：

1. 不要存储敏感信息：如密码、信用卡号等，因为它们是以明文形式存储的
2. XSS 攻击风险：如果网站存在 XSS 漏洞，攻击者可以获取存储的数据
3. 大小限制：虽然比 Cookie 大，但仍有限制，不适合存储大量数据

Web 存储与 Cookie 的比较

特性	Web 存储	Cookie
存储大小	localStorage 约20MB，sessionStorage 约5MB	约4KB
发送到服务器	不会自动发送	每次请求都会发送
生命周期	localStorage 永久，sessionStorage 会话期间	可设置过期时间
访问权限	同源策略	同源策略，可设置路径限制
操作方式	简单的 API	需要解析字符串

总结

HTML5 的 Web 存储（localStorage 和 sessionStorage）为 Web 应用提供了更好的本地存储解决方案，相比传统的 Cookie，它们具有更大的存储容量和更简单的 API。

localStorage 适合存储需要长期保存的数据，而 sessionStorage 适合存储在会话期间需要使用的临时数据。在使用时，需要注意安全性问题，避免存储敏感信息，并注意数据的序列化和反序列化。