HTML5 Web Storage：本地与会话存储的键值对数据管理

61 浏览量更新于2024-08-31 收藏 90KB PDF 举报

“html5指南-5.使用web storage存储键值对的数据” 在HTML5中，Web Storage是一项重要特性，它允许网页在用户浏览器中存储大量数据，以键值对的形式进行管理。与传统的Cookie相比，Web Storage提供了更大的存储空间，并且在性能和使用便捷性上有所提升。主要分为两种类型：localStorage和sessionStorage。 1. localStorage localStorage用于持久化存储，即使用户关闭了浏览器，数据也会被保留。它的主要方法包括： - clear()：清除所有存储的键值对。 - getItem(<key>)：根据键(key)获取对应的值(value)。 - key(<index>)：通过索引(index)获取键(key)。 - length：返回存储的键值对数量。 - removeItem(<key>)：根据键(key)删除对应的值(value)。 - setItem(<key>,<value>)：设置或更新键(key)对应的值(value)。 - [<key>]：通过键(key)作为数组下标访问对应的值(value)。例如，以下是一个使用localStorage存储和读取数据的简单示例： ```html <!DOCTYPE HTML> <html> <head> <title>Example</title> <style> /* CSS样式省略 */ </style> </head> <body>  <script> // 存储数据 localStorage.setItem('name', 'John Doe'); localStorage.setItem('age', '30'); // 读取数据 var name = localStorage.getItem('name'); var age = localStorage.getItem('age'); // 输出数据 document.write('Name: ' + name + ', Age: ' + age); </script> </body> </html> ``` 在这个例子中，我们设置了两个键值对（'name'和'age'），然后通过getItem方法读取它们，并将结果输出到页面。 2. sessionStorage sessionStorage与localStorage类似，但其生命周期只限于当前会话。一旦用户关闭了浏览器窗口，sessionStorage中的数据就会丢失。它同样提供上述相同的方法，适用于临时存储在单个浏览会话期间需要保留的信息。使用Web Storage的好处在于，相比于Cookie，它不会随着每个HTTP请求发送到服务器，从而减少了网络流量。此外，存储容量通常远大于Cookie（通常为5MB左右，具体取决于浏览器），使得它可以用于存储大量用户数据，如用户配置、游戏进度或页面状态等。需要注意的是，Web Storage的数据仅限于同源策略，即只能在创建它的源（协议+域名+端口）的页面中访问，这保证了数据的安全性。同时，由于数据存储在客户端，开发者应谨慎处理敏感信息，避免泄露用户隐私。 Web Storage是HTML5为提高用户体验和应用性能提供的强大工具，它扩展了浏览器的数据存储能力，使得网页应用能够更高效地管理本地数据。

html5指南指南-5.使用使用web storage存储键值对的数据存储键值对的数据

本节课的内容是介绍web storage，使用它在浏览器里存储键值对的数据，功能上像以前的cookie一样，不过他

更好，存储的数据可以更大感兴趣的朋友可以了解下哦

本节课的内容是介绍web storage，使用它在浏览器里存储键值对的数据，功能上像以前的cookie一样，不过他更好，存储的

数据可以更大。有两种类型的web storage：local storage和session storage，他们使用相同的实现机制，只是可见性和生命

周期不同。

1.使用使用local storage

我们使用localStorage对象来访问local storage，他返回Storage对象，Storage用来存储键值对的数据，他有下面一些属性和

方法：

clear()：清楚存储的键值对数据；

getItem(<key>)：通过key获取value值；

key(<index>)：通过索引获取key值；

length：返回键值对的个数；

removeItem(<key>)：通过key移出指定数据；

setItem(<key>,<value>)：添加一个键值对，当指定key的键值对存在，则实现更新操作；

[<key>]：通过数组下标的方式，使用key获取指定value值。

Storage对象允许我们存储key和value都是字符串形式的键值对数据，key是唯一的，意味着当我们使用setItem方法添加键值

对时，如果key值已经存在的话，将实现更新的操作。我们来看下面的例子：

复制代码

代码如下:

<!DOCTYPE HTML>

<html>

<head>

<title>Example</title>

<style>

body > *{float: left;}

table{border-collapse: collapse;margin-left: 50px;}

th, td{padding: 4px;}

th{text-align: right;}

input{border: thin solid black;padding: 2px;}

label{min-width: 50px;display: inline-block;text-align: right;}

#countmsg, #buttons{margin-left: 50px;margin-top: 5px;margin-bottom: 5px;}

</style>

</head>

<body>

<div>

<div>

<label>Value:</label><input id="value" placeholder="Enter Value" /></div>

<button id="clear">Clear</button>

</div>

<p id="countmsg">There are <span id="count"></span>items</p>

</div>

<tr>

<th>Item Count:</th>

</tr>

</table>

displayData();

var buttons = document.getElementsByTagName('button');

for (var i = 0; i < buttons.length; i++) {

buttons[i].onclick = handleButtonPress;

}

function handleButtonPress(e) {

switch (e.target.id) {

case 'add':

var key = document.getElementById('key').value;

var value = document.getElementById('value').value;

下载后可阅读完整内容，剩余3页未读，立即下载

weixin_38658085

粉丝: 8
资源: 948

HTML5 Web Storage：本地与会话存储的键值对数据管理

HTML5 移动WEB开发指南

掌握浏览器键值存储：js-storage与AngularJS实践指南

【Django存储扩展】：django.core.files.storage插件开发指南

深入Django存储：django.core.files.storage详解及性能优化指南

鲶鱼浏览器存储 jLos v1.0.0-源码.zip

前端项目-localStorage.zip

最新HTML5新手入门指南.docx

gazel:浏览器的键值存储

前端开源库-data-storage

HTML5新手入门指南

最新资源