如何利用HTML5的Web Storage技术来存储键值对数据？

2024年10月4日 互联网
Web Storage 是一种在浏览器端存储键值对数据的方法，包括两种类型：localStorage 和 sessionStorage。

HTML5 提供了两种 Web Storage 机制：localStorage 和 sessionStorage，它们都通过键值对的形式存储数据，以下是关于如何使用这两种 Web Storage 机制的详细指南。

localStorage 与 sessionStorage 的基本概念

特性 localStorage sessionStorage
存储位置 本地硬件上，数据持久化存储。 session 对象中，数据在浏览器关闭时被清除。
生命周期 永久，除非手动清除。 临时，仅在当前会话有效。
大小限制 约 5MB（不同浏览器可能有所不同）。 同上。
使用场景 用于存储需要长期保留的数据，如用户设置、登录信息等。 用于存储会话期间的临时数据，如表单数据、页面状态等。

Web Storage 常用方法

如何利用HTML5的Web Storage技术来存储键值对数据？

localStorage 示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF8">
    <meta name="viewport" content="width=devicewidth, initialscale=1.0">
    <title>Web Storage Example</title>
</head>
<body>
    <script>
        // 保存数据
        localStorage.setItem('name', 'Alice');
        console.log(localStorage.getItem('name')); // Alice
        // 修改数据
        localStorage.setItem('name', 'Bob');
        console.log(localStorage.getItem('name')); // Bob
        // 删除单个数据
        localStorage.removeItem('name');
        console.log(localStorage.getItem('name')); // null
        // 清空所有数据
        localStorage.clear();
        console.log(localStorage.length); // 0
    </script>
</body>
</html>

sessionStorage 示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF8">
    <meta name="viewport" content="width=devicewidth, initialscale=1.0">
    <title>Session Storage Example</title>
</head>
<body>
    <script>
        // 保存数据
        sessionStorage.setItem('username', 'JohnDoe');
        console.log(sessionStorage.getItem('username')); // JohnDoe
        // 修改数据
        sessionStorage.setItem('username', 'JaneDoe');
        console.log(sessionStorage.getItem('username')); // JaneDoe
        // 删除单个数据
        sessionStorage.removeItem('username');
        console.log(sessionStorage.getItem('username')); // null
        // 清空所有数据
        sessionStorage.clear();
        console.log(sessionStorage.length); // 0
    </script>
</body>
</html>

构造函数封装操作

为了更方便地操作 localStorage，可以创建一个构造函数来封装其方法：

var LocalEvent = function(item) {
    this.get = function() { return localStorage.getItem(item); }
    this.set = function(val) { localStorage.setItem(item, val); }
    this.remove = function() { localStorage.removeItem(item); }
    this.clear = function() { localStorage.clear(); }
}
var local1 = new LocalEvent('name1');
var local2 = new LocalEvent('name2');
local1.set('Hello World');
local2.set('Hello Linxin');
console.log(local1.get()); // Hello World
console.log(local2.get()); // Hello Linxin

监听 storage 事件

可以通过监听window 对象的storage 事件并指定其事件处理函数，当页面中对 localStorage 或 sessionStorage 进行修改时，则会触发对应的处理函数：

window.addEventListener('storage', function(e) {
    console.log('key=' + e.key + ', oldValue=' + e.oldValue + ', newValue=' + e.newValue);
});

调试工具

谷歌浏览器自带调试工具 (chrome devtools) 可以用来调试 localStorage 和 sessionStorage：

1、打开浏览器按 F12 调出调试工具。

2、选择 Application 选项卡，点击左侧栏的 Storage。

3、选中要调试的网站域名，可以看到右边有对应的 key 和 value，可以通过右键进行编辑或删除等。

兼容性

IE8 以上版本支持 Web Storage，但需要在服务器环境下打开页面才支持，直接双击打开文件的 file:// 协议是不支持的，到了 IE11 才支持 file:// 下打开的页面，其他现代浏览器的支持程度都很高，包括在手机上的兼容，具体兼容性情况可以参考 [Can I use](http://caniuse.com/#search=localstorage)。

FAQs: Web Storage 常见问题解答

Q1: localStorage 和 sessionStorage 的区别是什么？

区别：localStorage 用于持久化存储，数据会长期保存在客户端；而 sessionStorage 用于会话存储，数据只在当前会话有效，关闭浏览器后数据会被清除，localStorage 的数据可以在多个标签页间共享，而 sessionStorage 的数据仅在当前标签页内有效。

Q2: 如果存储的对象不是字符串怎么办？

解决方法：如果需要存储的对象不是字符串格式，可以使用 JSON.stringify() 将对象转换为 JSON 字符串再进行存储，读取时，使用 JSON.parse() 将字符串转换回对象。

// 存储对象
var obj = { name: "Alice", age: 30 };
localStorage.setItem("user", JSON.stringify(obj));
// 读取对象
var storedObj = JSON.parse(localStorage.getItem("user"));
console.log(storedObj); // { name: "Alice", age: 30 }

HTML5 使用 Web Storage 存储键值对数据指南

Web Storage 是一种在浏览器中存储数据的方法，它允许网站存储键值对数据，而不是使用传统的 cookies，Web Storage 提供了两种存储方式：localStorage 和sessionStorage，本文将详细介绍这两种方法的使用。

1. localStorage

localStorage 提供了一种在用户的浏览器中持久存储数据的方式，这意味着即使浏览器关闭后，数据也会保留。

1.1 基本用法

// 存储数据
localStorage.setItem('key', 'value');
// 获取数据
var value = localStorage.getItem('key');
// 删除数据
localStorage.removeItem('key');
// 清空所有数据
localStorage.clear();

1.2 注意事项

localStorage 的数据存储空间通常为 5MB。

存储的数据是字符串形式，如果需要存储对象，需要先进行序列化。

2. sessionStorage

sessionStorage 与localStorage 类似，但它存储的数据仅在当前会话中有效，当用户关闭浏览器窗口后，存储的数据会被清除。

2.1 基本用法

// 存储数据
sessionStorage.setItem('key', 'value');
// 获取数据
var value = sessionStorage.getItem('key');
// 删除数据
sessionStorage.removeItem('key');
// 清空所有数据
sessionStorage.clear();

2.2 注意事项

sessionStorage 的数据仅在当前会话中有效，关闭浏览器窗口后数据消失。

与localStorage 一样，存储的数据是字符串形式。

3. 归纳

Web Storage 提供了一种简单的方式来存储和检索数据，它们在网页开发中非常有用，使用localStorage 和sessionStorage 可以根据实际需求选择合适的存储方式。

4. 示例

以下是一个简单的示例，展示如何使用localStorage 和sessionStorage：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF8">
    <title>Web Storage Example</title>
</head>
<body>
    <script>
        // 使用 localStorage 存储数据
        localStorage.setItem('name', 'John Doe');
        console.log('LocalStorage name: ' + localStorage.getItem('name'));
        // 使用 sessionStorage 存储数据
        sessionStorage.setItem('age', '30');
        console.log('SessionStorage age: ' + sessionStorage.getItem('age'));
        // 清空 localStorage
        localStorage.clear();
        console.log('LocalStorage cleared');
        // 清空 sessionStorage
        sessionStorage.clear();
        console.log('SessionStorage cleared');
    </script>
</body>
</html>

在这个示例中，我们使用localStorage 和sessionStorage 分别存储和检索数据，并在控制台中打印结果，我们清空了两个存储区域的数据。

最新文章