当前位置：首页 > news >正文

JavaScript--WebStorage

news 2025/12/18 11:30:05

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 中存储的数据在会话结束后将会被清除。因此，在关闭浏览器标签或窗口之后，数据将会丢失。

WebStorage概述

WebStorage分类

注意：

localStorage方法

介绍：

常见方法：

案例演示：

sessionStorage方法

介绍：

常见方法：

案例演示：

相关文章：