简介
早期本地存储使用的是 cookie，但是随着网络的发展数据会越来越多和频繁，Web 存储需要更加的安全与快速；
HTML5 Web 存储为此诞生，它就像本地一个小型的数据库，存储数据更多，结构更合理，速度更快；
HTML5 Web 存储数据使用键值对存放数据，能存储大量的数据而不影响网站的性能。
兼容性
IE7 及早期版本不支持 Web 存储。
<script type="text/javascript">
function checkSupportStorage(){
var support = typeof(Storage) !== "undefined";
var msg = support ? "supports" : "doesn't supports";
alert("Your browser " + msg + " Web Storage");
}
</script>
<input type="button" onclick="checkSupportStorage()" value="检查是否支持Web存储"/>
实例：
存储对象
存储数据的两个对象为 localStorage 和 sessionStorage 对象：
- localStorage 用于长久保存数据，没有过期时间，除非手动删除，使用之前应该先检查浏览器是否支持；
- sessionStorage 用于临时保存同一窗口(或标签页)的数据，在关闭窗口或标签页之后将会删除这些数据；
它们都支持下面的存储 API：
| 方法 |
说明 |
| setItem(key,value) |
保存数据，key 代表键值，value 代表数据值 |
| getItem(key) |
根据 key 读取数据 |
| removeItem(key) |
根据 key 删除数据 |
| clear() |
删除所有数据 |
| key(index) |
根据索引获取某个值 |
保存和读取键值数据还可以通过下面直接通过属性名等于键值的方式进行：
localStorage.sitename = "TXTech"
sessionStorage.sitename = "TXTech"
实例
下面例子分别演示 localStorage 和 sessionStorage 操作，localStorage 存储后关闭标签或者浏览器再此打开数据还在而 sessionStorage 是会自动删除；
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Web Storage</title>
<script type="text/javascript">
function supportStorage(){
return typeof(Storage) !== "undefined";
}
function setItem(object){
if(!supportStorage()){
alert("你的浏览器不支持 Web 存储");
return;
}
var key = document.getElementById("key").value;
var value = document.getElementById("value").value;
if(key === ""){
alert("请输入键值！");
return;
}
if(value === ""){
alert("请输入值！");
return;
}
object.setItem(key,value);
alert("存储成功，数据是:" + object.getItem(key));
}
function remoteItem(object){
if(!supportStorage()){
alert("你的浏览器不支持 Web 存储");
return;
}
var key = document.getElementById("key").value;
if(key === ""){
alert("请输入键值！");
return;
}
object.removeItem(key);
alert("删除数据成功!");
}
function clean(object){
if(!supportStorage()){
alert("你的浏览器不支持 Web 存储");
return;
}
object.clear();
alert("删除所有数据成功!");
}
</script>
</head>
<body>
<label for="key">键：</label>
<input type="text" id="key" />
<label for="value">值：</label>
<input type="text" id="value" />
<h4>localStorage 操作</h4>
<input type="button" onclick="setItem(localStorage)" value="存储数据">
<input type="button" onclick="remoteItem(localStorage)" value="删除数据">
<input type="button" onclick="clean(localStorage)" value="删除所有数据">
<h4>sessionStorage 操作</h4>
<input type="button" onclick="setItem(sessionStorage)" value="存储数据">
<input type="button" onclick="remoteItem(sessionStorage)" value="删除数据">
<input type="button" onclick="clean(sessionStorage)" value="删除所有数据">
</body>
</html>
效果：
HTML Web 存储
简介
早期本地存储使用的是 cookie，但是随着网络的发展数据会越来越多和频繁，Web 存储需要更加的安全与快速；
HTML5 Web 存储为此诞生，它就像本地一个小型的数据库，存储数据更多，结构更合理，速度更快；
HTML5 Web 存储数据使用键值对存放数据，能存储大量的数据而不影响网站的性能。
兼容性
IE7 及早期版本不支持 Web 存储。
<script type="text/javascript"> function checkSupportStorage(){ var support = typeof(Storage) !== "undefined"; var msg = support ? "supports" : "doesn't supports"; alert("Your browser " + msg + " Web Storage"); } </script> <input type="button" onclick="checkSupportStorage()" value="检查是否支持Web存储"/>实例：
存储对象
存储数据的两个对象为 localStorage 和 sessionStorage 对象：
它们都支持下面的存储 API：
保存和读取键值数据还可以通过下面直接通过属性名等于键值的方式进行：
实例
下面例子分别演示 localStorage 和 sessionStorage 操作，localStorage 存储后关闭标签或者浏览器再此打开数据还在而 sessionStorage 是会自动删除；
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Web Storage</title> <script type="text/javascript"> function supportStorage(){ return typeof(Storage) !== "undefined"; } function setItem(object){ if(!supportStorage()){ alert("你的浏览器不支持 Web 存储"); return; } var key = document.getElementById("key").value; var value = document.getElementById("value").value; if(key === ""){ alert("请输入键值！"); return; } if(value === ""){ alert("请输入值！"); return; } object.setItem(key,value); alert("存储成功，数据是:" + object.getItem(key)); } function remoteItem(object){ if(!supportStorage()){ alert("你的浏览器不支持 Web 存储"); return; } var key = document.getElementById("key").value; if(key === ""){ alert("请输入键值！"); return; } object.removeItem(key); alert("删除数据成功!"); } function clean(object){ if(!supportStorage()){ alert("你的浏览器不支持 Web 存储"); return; } object.clear(); alert("删除所有数据成功!"); } </script> </head> <body> <label for="key">键：</label> <input type="text" id="key" /> <label for="value">值：</label> <input type="text" id="value" /> <h4>localStorage 操作</h4> <input type="button" onclick="setItem(localStorage)" value="存储数据"> <input type="button" onclick="remoteItem(localStorage)" value="删除数据"> <input type="button" onclick="clean(localStorage)" value="删除所有数据"> <h4>sessionStorage 操作</h4> <input type="button" onclick="setItem(sessionStorage)" value="存储数据"> <input type="button" onclick="remoteItem(sessionStorage)" value="删除数据"> <input type="button" onclick="clean(sessionStorage)" value="删除所有数据"> </body> </html>效果：
root