关注用户体验，分享前端技术

HTML5存储

摘要：

　　数据存储是每一个站点必不可少的功能，在HTML5之前通过cookie可以实现本地数据存储。但是cookie只能存储4kb的数据，并且cookie是随http请求一起发送到服务端，这必然浪费了带宽。Web Storage是HTML5引入的一个非常重要的功能，可以在客户端本地存储数据，类似HTML4的cookie，但可实现功能要比cookie强大的多，Web Storage官方建议为每个网站5MB，每个浏览器存储数据大小不一致。

　　web storage分为两种，一种是localStorage，另一种是sessionStorage，两者的差别是sessionStorage会随着浏览器的关闭而被清楚掉，而localStorage会永久的保存在本地，除非人为的删除。数据是以对象的格式存储在本地，两种存储的方法是一样的。

浏览器:

方法：

增：

if(window.localStorage) {
　　localStorage.setItem('key', 'value');
}

删：　

if(window.localStorage) {
　　localStorage.removeItem('key');
}

改：

　　与增方法一样

查：

if(window.localStorage) {
　　localStorage.getItem('key');
}

删除所有数据：

if(window.localStorage) {
　　localStorage.clear();
}

获取某个索引的key，或者是数据的key：

if(window.localStorage) {
　　localStorage.setItem('key', 'data');
　　console.log(localStorage.key('data')); // output key
}

扩展方法：

因为数据是以对象形式存在本地，索引对象的操作符也可以使用

if(window.localStorage) {
　　var storage = window.localStorage;
　　storage.key1 = "text";
　　storage["key2"] = "test";
　　console.log(storage.key1);
　　console.log(storage["key2"]);
}

key()与length实现数据遍历：

if(window.localStorage) {
　　var storage = window.localStorage;
　　for (var i=0, l = storage.length; i < l; i++) {
　　　　var key = storage.key(i);
　　　　var value = storage.getItem(key);
　　　　console.log(key + "=" + value);
　　}
}

window的storage事件：

当数据键值改变或者clear的时候，就会触发storage事件

if(window.localStorage) {
　　if(window.addEventListener) { // 非IE
　　　　window.addEventListener("storage",handler,false);
　　} else if(window.attachEvent) { // IE
　　　　window.attachEvent("onstorage",handler);
　　}
　　function handler(e){

　　}
}

事件对象属性：

属性　　　　 类型 描述
key String 被添加、删除或者修改的key
oldValue Any 被修改、删除之前的值，如果是新增的则返回null
newValue Any 被修改、新增的值，如果是删除则返回null
url/uri String 当前页面地址

 Demo：

　　下面这个实例是一个在线记事本，数据存储在localStorage中。分为两个页面，一个是填写数据，另一个是查看

edit.html

复制代码
 1 <!doctype html>
 2 <html>
 3 <head>
 4     <title>LocalStorage</title>
 5     <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
 6     <style>
 7         #count {
 8             width: 500px;
 9             height: 500px;
10             background-color:#D3D3D3; 
11             margin:0 auto;
12         }
13     </style>
14     <script src="http://cdn.staticfile.org/jquery/2.0.0/jquery.min.js"></script>
15 </head>
16 <body>
17     <form method="post" action="">
18      <textarea id="count" name="count"></textarea><br />
19      <input type="button" name="button" id="sub" value="提交">
20      </form>
21     <script>
22           $(function(){
23             var data = new Array();
24             var json ="";
25             var storage = window.localStorage;
26             
27             $("#sub").click(function(){
28                 if(!storage.getItem("content")){
29                     storage.setItem("content", JSON.stringify($("#count").val().split('\n')));
30                 } else {
31                     var content = JSON.parse(storage.getItem("content"));
32                     if($.isArray(content)) {
33                         storage.setItem("content", JSON.stringify(content.concat($("#count").val().split('\n'))));
34                     } else {
35                         storage.setItem("content", JSON.stringify($("#count").val().split('\n').push(content)));
36                     }
37                 }
38                 $("#count").val("");
39                 location.href = 'see.html';
40             });
41         })
42     </script>
43 </body>
44 </html>
复制代码

 

see.html

复制代码
 1 <!doctype html>
 2 <html>
 3 <head>
 4     <title>NoteBook</title>
 5     <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
 6     <style>
 7         #conten {
 8             background-color: #E1C97F;
 9             width: 500px;
10             height: 600px;
11             margin: 0 0 0 500px;
12         }
13         .stor {
14             padding: 10px 10px;
15             border-bottom: 1px dotted black;
16         }
17         .check {
18             float: right;
19         }
20         #back {
21             margin-left: 700px;
22         }
23     </style>
24     <script src="http://cdn.staticfile.org/jquery/2.0.0/jquery.min.js"></script>
25 </head>
26 <body>
27     <div id="conten">
28     </div>
29     <input type="button" name="button" id="back" value="返回">
30     <script>
31         $(function(){
32             var storage = window.localStorage;
33             var newjson = JSON.parse(storage.getItem('content'));
34             for(var i=0;i<newjson.length;i++){
35                 var htm = "<p class='stor'>"+newjson[i]+"</p>";
36                 $(htm).appendTo("#conten");
37             }
38             $('#back').click(function() {
39                 location.href = 'edit.html';
40             });
41         });
42     </script>
43 </body>
44 </html>
复制代码

 

效果图

 

 

附录：

 

TopicDescription

HTMLStorage

Represents the list of key/value pairs that have been assigned to a single storage area.

clear

Removes all key/value pairs from the Web Storage area.

getItem

Retrieves the current value associated with the Web Storage key.

initStorageEvent

Initializes a new Document Object Model (DOM) storage event that thecreateEvent method created.

key

Retrieves the key at the specified index in the collection.

removeItem

Deletes a key/value pair from the Web Storage collection.

setItem

Sets a key/value pair.

key

Gets the key that is updated.

length

Retrieves the length of the key/value list.

localStorage

Retrieves the Web Storage area specific to the current document.

newValue

Gets the new value of the key.

oldValue

Gets the previous value of the key.

remainingSpace

Retrieves the remaining memory space, in bytes, for the storage object.

sessionStorage

Retrieves the Web Storage area for the session.

storageArea

Gets the Storage object of the affected document.

url

Gets the address of the document that the update affects.
posted @   夕阳白雪  阅读(526)  评论(0)  编辑  收藏  举报
编辑推荐：
· 开发者必知的日志记录最佳实践
· SQL Server 2025 AI相关能力初探
· Linux系列：如何用 C#调用 C方法造成内存泄露
· AI与.NET技术实操系列（二）：开始使用ML.NET
· 记一次.NET内存居高不下排查解决与启示
阅读排行：
· 开源Multi-agent AI智能体框架aevatar.ai，欢迎大家贡献代码
· Manus重磅发布：全球首款通用AI代理技术深度解析与实战指南
· 被坑几百块钱后，我竟然真的恢复了删除的微信聊天记录！
· 没有Manus邀请码？试试免邀请码的MGX或者开源的OpenManus吧
· 园子的第一款AI主题卫衣上架——"HELLO! HOW CAN I ASSIST YOU TODAY
点击右上角即可分享
微信分享提示