html5中的本地存储WebStorage

一、本地存储

在过去的web开发中，对于开发交互式的程序，我们经常使用cookie来满足状态存储的需求。但是这种方式有很多缺点，首先就是大小和数量的限制，一般cookie被限制在4k左右，所以严格来说cookie不算本地存储技术，因为每次发送http请求都要带上cookie,如果数据太多会严重影响传输性能，所以cookie有很多的不足，于是html5中为本地存储定义了新的内容webstorge.

1. WebStorge

浏览器中内置了两个已经实例化好的对象分别是：

• SessionStorage(仅在单个回话范围内有效)
• localStorage（持久化的本地存储）

2. localStorage和sessionStorage的属性和方法

Name	Description
Length	获取存储的键值对的数量
remainingSpace	获取存储空间剩余空间的大小(非标准，仅IE8.0+支持)
setItem(key, value)	将value值存储到本地的key字段
removeItem(key)	删除指定key本地存储的值
getItem(key)	获取指定key本地存储的值
clear()	删除localStorage中存储的所有数据
key(index)	根据索引获取一个指定位置的键名

3. 简单的应用例子说明 localStorage和sessionStorage两者的区别

• SessionStorage(关闭窗口再次打开会淸0)

• localStorage（关闭窗口，再次打开继续上次计数）

4.使用JSON对象存取数据

我们经常通过引入json对象，结构化保存数据，读取数据，极大地方便使用localStorage对象保存多个字段数据额操作。

html

使用JSON对象存取数据
填写待存取信息到表格中

NAME:

E-mail:

Telephone:




检索已经存入localStorage的json对象，并且展示原始信息

js

// JavaScript Document
function saveStorage(){            
//创建一个js对象，用于存放当前从表单获得的数据
var data = new Object;             
//将对象的属性值名依次和用户输入的属性值关联起来
data.user=document.getElementById("user").value;
data.mail=document.getElementById("mail").value;
data.tel=document.getElementById("tel").value;
//创建一个json对象，让其对应html文件中创建的对象的字符串数据形式
var str = JSON.stringify(data);
//将json对象存放到localStorage上，key为用户输入的NAME，value为这个json字符串
localStorage.setItem(data.user,str);
console.log("数据已经保存! 被保存的用户为:"+data.user);
}
//从localStorage中检索用户输入的名称对应的json字符串，然后把json字符串解析为一组信息， 并且打印到指定位置
function findStorage(find){            
//获得用户的输入，是用户希望检索的名字
var requiredPersonName = document.getElementById("find").value;
//以这个检索的名字来查找local Storage,得到了json字符串
var str=localStorage.getItem(requiredPersonName);
//解析这个json字符串得到Object对象
var data= JSON.parse(str);
//从Object对象中分离出相关属性值，然后构造要输出的HTML内容
var result="NAME:"+data.user+'
';
result+="E-mail:"+data.mail+'
';
result+="Telephone:"+data.tel+'
';           
//取得页面上要输出的容器
var target = document.getElementById(id);       
target.innerHTML = result;
}