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类型的差异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之网页存储 的详细内容,更多请关注Gxl网其它相关文章!