HTML5 web存储
HTML5 web存储
1 Cookie:
特点：
键值对的形式存储数据
在本地浏览器存储数据
有效期：未来的事件（expires）
存储数据的容量：<4kb
所有的http请求都会带上cookie信息，（联想HTTPget请求可以传递的数据），从某种意义上来说，用cookie存储不是那么安全
2.1用法
2.1.1保存数据
localStorage.setItem("key",value);
setitem(key,value)有两个参数，第一个参数是存储数据的键名，第二个参数是存储数据的值。
2.1.2获取数据
localStorage.getItem("key");
getIntem(k);只有一个参数，该参数是获取数据的键名
2.1.3删除指定键名的数据
localStorage.removeItem("age");
removeItem(k);根据指定的键名删除数据，
2.1.4清除
localStorage.clear();
clear()；清除所有存储在localStorage的数据
注意：key写具体的时候，要加””;
localStorage存储的数据没有时间限制
<body>
<form>
<label for="username">姓名</label>
<input id="username" type="text"/><br/>
<label for="age">年龄</label>
<input id="age" type="text"/><br/>
<button id="saveBtn">保存数据</button>
<button id="removeBtn">删除数据</button>
<button id="getBtn">获取数据</button>
</form>
</body>
<script src="../assert/jquery-1.9.1.min.js"></script>
<script>
//保存数据
$("#saveBtn").click(function () {
var username = $("#username").val(); // 姓名
localStorage.setItem("name",username);
var age = $("#age").val(); // 年龄
localStorage.setItem("age",age);
});
//删除数据
$("#removeBtn").click(function () {
//单个删除
// localStorage.removeItem("name");
// localStorage.removeItem("age");
//一次性删除
localStorage.clear();
});
//获取数据
$("#getBtn").click(function () {
var value = localStorage.getItem("age");
alert(value)
});
</script>3 sessionStorage
sessionStorage的运行方式与localStorage的方式一样，唯一不同的而是sessionStorage存储的数据的有效期仅对当前的浏览器（或页面）有效，一旦关闭，之前存储的内容也就没有了
4 区别
| 特性 | cookie | localStorage | sessionStprage |
|---|---|---|---|
| 生命周期 | 根据设置的事件 | 除非被清除，否则永远存在 | 浏览器一关闭，就没了 |
| 存储容量 | <4K | 5Mb | 5Mb |
| 和服务器通讯（http） | 每次请求都会带上cookie | 只保持在浏览器，和服务器没有半毛钱关系 | 只保持在浏览器，和服务器没有半毛钱关系 |
| 易用性 | 接口不大友好（参数需要自个拼接） | 接口还可以接受！对于object、array等类型的数据存储比较麻烦 | 接口还可以接受！对于object、array等类型的数据存储比较麻烦 |
5 存储对象
Storage只能存储字符串，不能存储对象或者数组，如果要存储的话，，必须经过转换，通过JSON对象中的stringify()将对象转换为字符串 var str = JSON.stringify(informaction); //转换为字符串
将对象转换为字符串，然后进行存储，同样的也可以通过JSON对象中的parse()将对象进行解析 var result = JSON.parse(str); //解析对象
5.1 JSON.parese();将字符串转换为对象
5.2 JSON.stringify();将对象转换为字符串
5.3解决问题
（1）localStorage/sessionStorage存数据
先将需要存储的对象→字符串JSON.Stringify()
存储该字符串
（1）localStorage/sessionStorage读数据
先将需要读取的字符串→对象 JSON.parese()
$("#saveBtn").click(function () {
var username = $("#username").val();
var age = $("#age").val();
var informaction = new Object(); //创建对象
informaction.username = username; //将姓名存入对象
informaction.age = age; //将年龄存入对象
var str = JSON.stringify(informaction); //转换为字符串
var result = JSON.parse(str); //解析对象
localStorage.setItem("",str);
});
//从本地缓存里面拿出数据，同时拿出的数据有可能是空的，所以需要||"[]"
var _history = localStorage.getItem(historyCityKey) ||"[]";
var historyCity=JSON.parse(_history);
return historyCity;