一、本地存储
在过去的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)
<script type="text/javascript">
if (sessionStorage.count)
{
sessionStorage.count=Number(sessionStorage.count) +1;
}
else
{
sessionStorage. count=1;
}
document.write("您访问该网站的次数为：" + sessionStorage.count);
</script>
- localStorage（关闭窗口，再次打开继续上次计数）
<script type="text/javascript">
if (localStorage.count)
{
localStorage.count=Number(localStorage.count) +1;
}
else
{
localStorage.count=1;
}
document.write("您访问该网站的次数为："+ localStorage.count);
</script>
4.使用JSON对象存取数据
我们经常通过引入json对象，结构化保存数据，读取数据，极大地方便使用localStorage对象保存多个字段数据额操作。
html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>使用JSON对象存取数据</title>
<script type="text/javascript" src="objectStorage.js"></script>
</head>
<body>
<h3>使用JSON对象存取数据</h3>
<h4>填写待存取信息到表格中</h4>
<table>
<tr><td>NAME:</td><td><input type="text" id="user"></td></tr>
<tr><td>E-mail:</td><td><input type="text" id="mail"></td></tr>
<tr><td>Telephone:</td><td><input type="text" id="tel"></td></tr>
<tr><td></td><td><input type="button" value="保存" onclick="saveStorage();"></td></tr>
</table>
<hr>
<h4>检索已经存入localStorage的json对象，并且展示原始信息</h4>
<p>
<input type="text" id="find">
<input type="button" value="检索" onclick="findStorage('msg');">
</p>
<!--以下代码用于显示被检索到的信息 -->
<p id ="msg"></p>
</body>
</html>
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+'<br>';
result+="E-mail:"+data.mail+'<br>';
result+="Telephone:"+data.tel+'<br>';
//取得页面上要输出的容器
var target = document.getElementById(id);
target.innerHTML = result;
}
网友评论