阅读量:0
Web Storage 是一种在浏览器端存储键值对数据的方法，包括两种类型：localStorage 和 sessionStorage。
HTML5 提供了两种 Web Storage 机制：localStorage 和 sessionStorage，它们都通过键值对的形式存储数据，以下是关于如何使用这两种 Web Storage 机制的详细指南。
localStorage 与 sessionStorage 的基本概念
| 特性 | localStorage | sessionStorage |
| 存储位置 | 本地硬件上，数据持久化存储。 | session 对象中，数据在浏览器关闭时被清除。 |
| 生命周期 | 永久，除非手动清除。 | 临时，仅在当前会话有效。 |
| 大小限制 | 约 5MB（不同浏览器可能有所不同）。 | 同上。 |
| 使用场景 | 用于存储需要长期保留的数据，如用户设置、登录信息等。 | 用于存储会话期间的临时数据，如表单数据、页面状态等。 |
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 分别存储和检索数据，并在控制台中打印结果，我们清空了两个存储区域的数据。
