HTML5之网页存储
HTML5 网页储备 Web Storage
一、认识Web Storage
Web Storage是一种将少量数据储备在客户端（client）磁盘的技术。只要支撑WebStorage API规格的阅读器，网页设计者都可以使用JavaScript来操纵它，我们先理解一下Web Storage。
Web Storage的容量由客户端阅读器决议，平常1MB~5MB。
Web Storage纯洁运转客户端，不会每次网页恳求连带发送给效劳端。
Web Storage以一组key-value对应留存数据。
Web Storage供给两种方式将数据留存在客户端：一种是localStorage，一种是sessionStorage，两者的差别在于说明周期和有效范畴。
| Web Storage类型 | 生命周期 | 有效范畴 |
| localStorage | 施行删除命令时才会消逝 | 统一网站的网页可以跨窗口和分页 |
| sessionStorage | 阅读器窗口或分页（tab）关闭就会消逝 | 仅对当前阅读器窗口或分页有效 |
检测阅读器可否支撑Web Storage，语法如下：
if(typeof(Storage)=="undefined"){
<span style="white-space:pre"> </span>alert("您的阅读器不支撑Web Storage");
}
else{
<span style="white-space:pre"> </span>//localStorage和sessionStorage程序代码
}留意：IE和Firefox测试时需要把文件上传到效劳器或者localhost才能运转。倡议测试时使用Google Chrome阅读器。
二、详细学习
1、拜访localStorage
雷同网站是指：和谈、主机（domain与ip）、传输端口（port）都必需雷同。
WebStorage只同意储备字符串数据，有以下3种拜访localStorage的办法，前面的window可以不写
Storage对象的setItem和getItem办法（key："userdata"，value："Hello World"）
储备：window.localStorage.setItem(key,value);
读取：var v = window.localStorage.getItem(key);
数组索引
储备：window.localStorage[key] =value;
读取：var v = window.localStorage[key];
属性
储备：window.localStorage.key =value;
读取：var v = window.localStorage.key;
<span style="font-size:14px;"><!DOCTYPE html>
<html>
<head>
<title>网页储备localStorage</title>
<script type="text/javascript">
function onLoad(){
if(typeof(Storage)=="undefined"){
alert("Sorry！你的阅读器不支撑Web Storage");
}
else{
btn_save.addEventListener("click",saveToLocalStorage);
btn_load.addEventListener("click",loadFromLocalStorage);
}
}
function saveToLocalStorage(){
<strong>localStorage.username = inputname.value;</strong>
}
function loadFromLocalStorage(){
<strong>show_LocalStorage.innerHTML = localStorage.username+"你好，欢迎来到我的网站！";</strong>
}
</script>
</head>
<body onload="onLoad()">
请输入你的姓名：<input type="text" id="inputname" value="" /><br/>
<p id="show_LocalStorage"></p><br />
<button id="btn_save">储备到localStorage</button>
<button id="btn_load">从localStorage读取数据</button>
</body>
</html></span><span style="font-size: 18px;">
</span>二、删除localStorage
要想删除某一条localStorage数据，可以调取removeItem办法或者delete属性停止删除。
window.localStorage.removeItem("userdata");
delete window.localStorage.userdata;
delete.window.localStorage["userdata"];
要想删除全部的localStorage数据，可以使用clear()办法。
localStorage.clear();
<!DOCTYPE html>
<html>
<head>
<title>网页储备localStorage</title>
<script type="text/javascript">
function onLoad(){
if(typeof(Storage)=="undefined"){
alert("Sorry！你的阅读器不支撑Web Storage");
}
else{
btn_save.addEventListener("click",saveToLocalStorage);
btn_load.addEventListener("click",loadFromLocalStorage);
btn_clear.addEventListener("click",clearLocalStorage);
}
}
function saveToLocalStorage(){
localStorage.username = inputname.value;
}
function loadFromLocalStorage(){
show_LocalStorage.innerHTML = localStorage.username+"你好，欢迎来到我的网站！";
}
function clearLocalStorage(){
<strong>localStorage.clear();</strong>
show_LocalStorage.innerHTML = localStorage.username;
}
</script>
</head>
<body onload="onLoad()">
请输入你的姓名：<input type="text" id="inputname" value="" /><br/>
<p id="show_LocalStorage"></p><br />
<button id="btn_save">储备到localStorage</button>
<button id="btn_load">从localStorage读取数据</button>
<button id="btn_clear">清除localStorage数据</button>
</body>
</html>
三、拜访sessionStorage
储备
window.sessionStorage.setItem(key,value);
window.sessionStorage [key] = [value];
window.sessionStorage.key= value;
读取
var v = window.sessionStorage.getItem(key);
var v = window.sessionStorage [key];
var v = window.sessionStorage.key;
清除
window.sessionStorage.removeItem(key);
delete window.sessionStorage.key;
delete window.sessionStorage [key];
//全部清除
sessionStorage.clear();
<span style="font-size:14px;"><!DOCTYPE html>
<html>
<head>
<title>网页储备sessionStorage</title>
<script type="text/javascript">
function onLoad(){
inputSpan.style.display = 'none';
if(typeof(Storage)=="undefined"){
alert("Sorry！你的阅读器不支撑Web Storage");
}
else{
/*推断姓名可否已经存入localStorage，已存入时才施行{ }内的命令*/
if(localStorage.username){
/*数据不存在时返回undefined*/
if(!localStorage.counter){
localStorage.counter = 1; /*初始值设为1*/
}
else{
localStorage.counter++; /*递增*/
}
btn_login.style.display = 'none'; /*潜藏“登录”按钮*/
show_LocalStorage.innerHTML = localStorage.username+"你好，这是你第"+localStorage.counter+"次来到网站";
}
btn_login.addEventListener("click",login);
btn_send.addEventListener("click",sendok);
btn_logout.addEventListener("click",clearLocalStorage);
}
}
function sendok(){
localStorage.username = inputname.value;
location.reload(); /*重载网页*/
}
function login(){
inputSpan.style.display = '';
}
function clearLocalStorage(){
localStorage.clear(); /*状况localStorage*/
show_LocalStorage.innerHTML = "已成功注销！";
btn_login.style.display = ''; /*显示“登录”按钮*/
inputSpan.style.display = ''; /*显示姓名输入框和“提交”按钮*/
}
</script>
</head>
<body onload="onLoad()">
<button id="btn_login">登录</button>
<button id="btn_logout">注销</button><br />
<span id="inputSpan">请输入你的姓名：<input type="text" id="inputname" value="" /><button id="btn_send">提交</button></span><br />
<p id="show_LocalStorage"></p><br />
</body>
</html></span><span style="font-weight: bold; font-size: 24px;">
</span>注：JavaScript里的运算符“+”不仅可以数字相加还可以字符串相加。例如"123"+456="123456"
上例中localStorage.counter++;假如改成localStorage.counter = localStorage.counter +1;就会显现”11111......“
JavaScript将字符串转换成为数字可以用Number()办法，localStorage.counter =Number(localStorage.counter )+1;
以上就是HTML5之网页储备 的具体内容，更多请关注百分百源码网其它相关文章！
