JavaScript--WebStorage
目录
WebStorage概述
WebStorage分类
注意：
localStorage方法
介绍：
常见方法：
案例演示：
sessionStorage方法
介绍：
常见方法：
案例演示：
WebStorage概述
WebStorage是HTML5中本地存储的解决方案之一，在HTML5的WebStorage概念引入之前除去IE User Data、Flash Cookie、Google Gears等看名字就不靠谱的解决方案，浏览器兼容的本地存储方案只有使用Cookie。有同学可能会问，既然有了Cookie本地存储，为什么还要引入WebStorage的概念？与Cookie相比，WebStorage有以下几点优势：
-
容量：Cookie的存储容量较小，通常为几KB，而WebStorage可以存储更大容量的数据，一般为几MB。
-
服务器端交互：Cookie在每个HTTP请求中都会发送到服务器端，增加了网络流量。而WebStorage不会随每个请求发送到服务器，仅在客户端进行数据存储。
-
生命周期：Cookie有过期时间，可以设置为长久保存或在指定时间后过期删除。而sessionStorage仅在当前会话期间有效，关闭浏览器后数据将被清除；localStorage数据则会永久保存。
-
访问性能：从访问性能的角度看，Cookie需要在HTTP请求和响应中携带数据，会增加数据传输的开销；而WebStorage可以在客户端直接操作，读写速度更快。
-
安全性：Cookie存储的数据在每次请求中都会被发送到服务器端，安全性稍低；而WebStorage数据存储在浏览器端，只有对应网站的JavaScript代码才能访问，相对安全。
虽然WebStorage是HTML5新增的本地存储解决方案之一，但并不是为了取代Cookie而制定的标准，Cookie作为HTTP协议的一部分用来处理客户端和服务器通信是不可或缺的，session正是依赖于实现的客户端状态保持。WebStorage的意图在于解决本来不应该Cookie做，却不得不用Cookie的本地存储的应用场景。
WebStorage分类
JavaScript中的WebStorage是一种用于在Web浏览器中存储数据的API。它提供了两个主要的对象：sessionStorage和localStorage。
- sessionStorage对象用于在单个会话期间存储数据。当用户关闭浏览器标签页或窗口时，sessionStorage中的数据将被清除。
- localStorage对象用于永久性地存储数据，即使用户关闭浏览器标签页或窗口，数据也会被保留下来。
注意：
localStorage和sessionStorage只能存储字符串类型，对于复杂的对象可以使用ECMAScript提供的JSON对象的stringify和parse来处理，低版本IE可以使用json2.js。
localStorage方法
介绍：
localStorage是Web浏览器提供的一种本地存储机制，用于在浏览器中永久性地存储数据。它与 sessionStorage 类似，但 localStorage 的数据不会随着页面关闭而消失。
常见方法：
- 保存单个数据：使用 localStorage.setItem(key, value) 方法可以将指定的键值对存储到 localStorage 中。其中，key 是数据的键，value 是要保存的数据值。
- 读取单个数据：使用 localStorage.getItem(key) 方法可以根据指定的键从 localStorage 中获取相应的数据值。传入键名 key，即可返回对应的值。
- 删除单个数据：使用 localStorage.removeItem(key) 方法可以从 localStorage 中删除指定键的数据。传入要删除的键名 key 即可删除对应的数据。
- 删除所有数据：使用 localStorage.clear() 方法可以从 localStorage 中删除所有保存的数据。调用该方法后，localStorage 将被清空，所有的键值对都将被删除。
- 获取某个索引的键名：使用 localStorage.key(index) 方法可以根据索引获取对应位置的键名。传入索引 index，返回该位置上的键名。
案例演示：
<!DOCTYPE html>
<html>
<head><title>待办事项列表</title><script>// 初始化任务列表if (localStorage.getItem('tasks') === null) {localStorage.setItem('tasks', JSON.stringify([]));}function addTask() {var taskInput = document.getElementById('taskInput');var task = taskInput.value;if (task.trim() !== '') {var tasks = JSON.parse(localStorage.getItem('tasks'));tasks.push(task);localStorage.setItem('tasks', JSON.stringify(tasks));displayTasks();taskInput.value = '';}}function removeTask(index) {var tasks = JSON.parse(localStorage.getItem('tasks'));tasks.splice(index, 1);localStorage.setItem('tasks', JSON.stringify(tasks));displayTasks();}function displayTasks() {var tasks = JSON.parse(localStorage.getItem('tasks'));var taskList = document.getElementById('taskList');taskList.innerHTML = '';for (var i = 0; i < tasks.length; i++) {var taskItem = document.createElement('li');var taskText = document.createTextNode(tasks[i] + " ");var removeBtn = document.createElement('button');removeBtn.setAttribute('onclick', 'removeTask(' + i + ')');removeBtn.textContent = '删除';taskItem.appendChild(taskText);taskItem.appendChild(removeBtn);taskList.appendChild(taskItem);}}</script>
</head>
<body><h1>待办事项列表</h1><input type="text" id="taskInput" placeholder="输入任务"><button onclick="addTask()">添加任务</button><ul id="taskList"></ul><script>displayTasks();</script>
</body>
</html>
这个HTML页面创建了一个简单的待办事项列表应用。通过输入任务并点击"添加任务"按钮，可以将任务添加到localStorage中，并在页面上显示出来。每个任务都带有一个"删除"按钮，点击该按钮可以从任务列表中删除相应的任务。
该应用基于localStorage存储任务列表数据，当页面被加载时，会从localStorage中读取任务数据，并在页面上显示出来。添加任务、删除任务操作会同步更新localStorage中的数据，并重新呈现更新后的任务列表。
sessionStorage方法
介绍：
sessionStorage对象的确用于存储特定于某个对话的数据，其生命周期与当前窗口或标签页相关联。当窗口或标签页关闭时，通过sessionStorage存储的数据将被清空。
另外，存储在sessionStorage中的数据是可以跨越页面刷新而存在的。在某些情况下，如果浏览器支持，并且在浏览器崩溃并重新启动后，也可以继续使用先前存储的数据。这种支持在Firefox和WebKit中是同步写入的，所以添加到存储空间中的数据会立即提交。但是，在IE中，写入操作是异步的，因此设置数据和将数据实际写入磁盘之间可能会有一些延迟。
需要注意的是，sessionStorage对象是绑定于特定的服务器会话的，因此存储在sessionStorage中的数据只能由最初设置数据的页面访问。而且，对于多页面应用程序存在一定的限制，无法跨多个页面直接访问sessionStorage中的数据。
常见方法：
- 保存单个数据：使用 sessionStorage.setItem(key, value) 方法可以将指定的键值对存储到 sessionStorage 中。其中，key 是数据的键，value 是要保存的数据值。
- 读取单个数据：使用 sessionStorage.getItem(key) 方法可以根据指定的键从 sessionStorage 中获取相应的数据值。传入键名 key，即可返回对应的值。
- 删除单个数据：使用 sessionStorage.removeItem(key) 方法可以从 sessionStorage 中删除指定键的数据。传入要删除的键名 key 即可删除对应的数据。
- 清空所有数据：使用 sessionStorage.clear() 方法可以从 sessionStorage 中删除所有保存的数据。调用该方法后，sessionStorage 将被清空，所有的键值对都将被删除。
- 获取某个索引的键名：使用 sessionStorage.key(index) 方法可以根据索引获取对应位置的键名。传入索引 index，返回该位置上的键名。
案例演示：
下面是将localStorage的版本代码修改为使用 sessionStorage 的版本：
<!DOCTYPE html>
<html>
<head><title>待办事项列表</title><script>// 初始化任务列表if (sessionStorage.getItem('tasks') === null) {sessionStorage.setItem('tasks', JSON.stringify([]));}function addTask() {var taskInput = document.getElementById('taskInput');var task = taskInput.value;if (task.trim() !== '') {var tasks = JSON.parse(sessionStorage.getItem('tasks'));tasks.push(task);sessionStorage.setItem('tasks', JSON.stringify(tasks));displayTasks();taskInput.value = '';}}function removeTask(index) {var tasks = JSON.parse(sessionStorage.getItem('tasks'));tasks.splice(index, 1);sessionStorage.setItem('tasks', JSON.stringify(tasks));displayTasks();}function displayTasks() {var tasks = JSON.parse(sessionStorage.getItem('tasks'));var taskList = document.getElementById('taskList');taskList.innerHTML = '';for (var i = 0; i < tasks.length; i++) {var taskItem = document.createElement('li');var taskText = document.createTextNode(tasks[i] + " ");var removeBtn = document.createElement('button');removeBtn.setAttribute('onclick', 'removeTask(' + i + ')');removeBtn.textContent = '删除';taskItem.appendChild(taskText);taskItem.appendChild(removeBtn);taskList.appendChild(taskItem);}}</script>
</head>
<body><h1>待办事项列表</h1><input type="text" id="taskInput" placeholder="输入任务"><button onclick="addTask()">添加任务</button><ul id="taskList"></ul><script>displayTasks();</script>
</body>
</html>
与localStorage的版本不同，这次我们使用 sessionStorage 来存储任务列表数据。在代码中，所有出现 localStorage 的地方都被替换为 sessionStorage。
sessionStorage 提供了一个与 localStorage 类似的接口，用于在会话期间保存数据。与 localStorage 不同，sessionStorage 中存储的数据在会话结束后将会被清除。因此，在关闭浏览器标签或窗口之后，数据将会丢失。