1. 本地存储方式
cookie – HTML4 在客户端保存诸如用户名等简单信息
cookie存在的问题
- 大小： 大小被限制在4K;
- 带宽： cookie是随http一起发送，会浪费一部分发送cookie时使用的带宽
- 复杂性： 正确操作cookie有难度
HTML5中的客户端本地保存数据
sessionStorage 保存从进入网站到浏览器关闭这段时间内的所有数据 — 临时保存
保存数据的方法（两种）：
sessionStorage.setItem('key','value');
sessionStorage.key = 'value';
读取数据的方法（两种）：
变量 = sessionStorage.getItem('key');
变量 = sessionStorage.key';
localStorage 保存在客户端本地硬件设备中 —– 永久保存
注意： localstorage中的数据关闭浏览器后也存在，但是数据保存是按不同浏览器分别进行保存的，也就是说打开一种浏览器读取不到另一种浏览器中保存的数据。
保存数据的方法（两种）：
sessionStorage.setItem('key','value');
sessionStorage.key = 'value';
读取数据的方法（两种）：
变量 = sessionStorage.getItem('key');
变量 = sessionStorage.key';
2. localstorage的应用
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>简易数据库</title>
<link rel="stylesheet" href="http://apps.bdimg.com/libs/bootstrap/3.2.0/css/bootstrap.min.css">
</head>
<body>
<div style="width: 80%; margin: 0 auto">
<h1 class="navbar navbar-inverse" style="color: #fff;">WEB storage 做简易数据库</h1>
<table>
<tr>
<td>姓名</td>
<td><input type="text" id="name"/></td>
</tr>
<tr>
<td>邮箱</td>
<td><input type="text" id="email"/></td>
</tr>
<tr>
<td>电话号码</td>
<td><input type="text" id="tel"/></td>
</tr>
<tr>
<td>备注</td>
<td><input type="text" id="memo"/></td>
</tr>
<tr>
<td></td>
<td><button onclick="saveStorage()">保存</button></td>
</tr>
</table>
<hr/>
<p>检索：
<input type="text" id="find"/>
<button onclick="findStorage('msg')">检索</button>
</p>
<p id="msg">在这里添加检索内容</p>
</div>
<script>
function saveStorage(){
var data = new Object;
data.name = document.getElementById('name').value;
data.email = document.getElementById('email').value;
data.tel = document.getElementById('tel').value;
data.memo = document.getElementById('memo').value;
var str = JSON.stringify(data);
localStorage.setItem(data.name,str);
alert('数据已保存');
}
function findStorage(id){
var find = document.getElementById('find').value;
var str = localStorage.getItem(find);
var data = JSON.parse(str);
var result = "姓名："+ data.name +'<br>';
result += "邮箱：" + data.email +'<br>';
result += "电话号码" + data.tel +'<br>';
result += "备注：" + data.memo +'<br>';
var target = document.getElementById(id);
target.innerHTML = result;
}
</script>
</body>
</html>
![主流浏览器四大综合性能测试[图]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)