HTML5网页存储的方法

这篇“HTML5网页存储的方法”文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大家阅读完这篇文章能有所收获,下面我们一起来看看这篇“HTML5网页存储的方法”文章吧。

创新互联主营靖江网站建设的网络公司,主营网站建设方案,成都App制作,靖江h5微信小程序搭建,靖江网站营销推广欢迎靖江等地区企业咨询

一、认识WebStorage

WebStorage是一种将少量数据存储在客户端(client)磁盘的技术。只要支持WebStorageAPI规格的浏览器,网页设计者都可以使用JavaScript来操作它,我们先了解一下WebStorage。

WebStorage的容量由客户端浏览器决定,通常1MB~5MB。

WebStorage纯粹运行客户端,不会每次网页请求连带发送给服务端。

WebStorage以一组key-value对应保存数据。

WebStorage提供两种方式将数据保存在客户端:一种是localStorage,一种是sessionStorage,两者的差异在于申明周期和有效范围。

表一WebStorage类型的差异

WebStorage类型 生命周期 有效范围

localStorage 执行删除命令时才会消失 同一网站的网页可以跨窗口和分页

sessionStorage 浏览器窗口或分页(tab)关闭就会消失 仅对当前浏览器窗口或分页有效

检测浏览器是否支持WebStorage,语法如下:

if(typeof(Storage)=="undefined"){

alert("您的浏览器不支持WebStorage");

}

else{

//localStorage和sessionStorage程序代码

}

注意:IE和Firefox测试时需要把文件上传到服务器或者localhost才能运行。建议测试时使用GoogleChrome浏览器。

二、具体学习

1、访问localStorage

相同网站是指:协议、主机(domain与ip)、传输端口(port)都必须相同。

WebStorage只允许存储字符串数据,有以下3种访问localStorage的方法,前面的window可以不写

Storage对象的setItem和getItem方法(key:"userdata",value:"HelloWorld")

存储:window.localStorage.setItem(key,value);

读取:varv=window.localStorage.getItem(key);

数组索引

存储:window.localStorage[key]=value;

读取:varv=window.localStorage[key];

属性

存储:window.localStorage.key=value;

读取:varv=window.localStorage.key;

网页存储localStorage

functiononLoad(){

if(typeof(Storage)=="undefined"){

alert("Sorry!你的浏览器不支持WebStorage");

}

else{

btn_save.addEventListener("click",saveToLocalStorage);

btn_load.addEventListener("click",loadFromLocalStorage);

}

}

functionsaveToLocalStorage(){

localStorage.username=inputname.value;

}

functionloadFromLocalStorage(){

show_LocalStorage.innerHTML=localStorage.username+"你好,欢迎来到我的网站!";

}

请输入你的姓名:


存储到localStorage

从localStorage读取数据

二、删除localStorage

要想删除某一条localStorage数据,可以调用removeItem方法或者delete属性进行删除。

window.localStorage.removeItem("userdata");

deletewindow.localStorage.userdata;

delete.window.localStorage["userdata"];

要想删除全部的localStorage数据,可以使用clear()方法。

localStorage.clear();

网页存储localStorage

functiononLoad(){

if(typeof(Storage)=="undefined"){

alert("Sorry!你的浏览器不支持WebStorage");

}

else{

btn_save.addEventListener("click",saveToLocalStorage);

btn_load.addEventListener("click",loadFromLocalStorage);

btn_clear.addEventListener("click",clearLocalStorage);

}

}

functionsaveToLocalStorage(){

localStorage.username=inputname.value;

}

functionloadFromLocalStorage(){

show_LocalStorage.innerHTML=localStorage.username+"你好,欢迎来到我的网站!";

}

functionclearLocalStorage(){

localStorage.clear();

show_LocalStorage.innerHTML=localStorage.username;

}

请输入你的姓名:


存储到localStorage

从localStorage读取数据

清除localStorage数据

20d778d6ea2e72c0debf96707138b93d_Center.jpg

三、访问sessionStorage

存储

window.sessionStorage.setItem(key,value);

window.sessionStorage[key]=[value];

window.sessionStorage.key=value;

读取

varv=window.sessionStorage.getItem(key);

varv=window.sessionStorage[key];

varv=window.sessionStorage.key;

清除

window.sessionStorage.removeItem(key);

deletewindow.sessionStorage.key;

deletewindow.sessionStorage[key];

//全部清除

sessionStorage.clear();

网页存储sessionStorage

functiononLoad(){

inputSpan.style.display='none';

if(typeof(Storage)=="undefined"){

alert("Sorry!你的浏览器不支持WebStorage");

}

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);

}

}

functionsendok(){

localStorage.username=inputname.value;

location.reload();/*重载网页*/

}

functionlogin(){

inputSpan.style.display='';

}

functionclearLocalStorage(){

localStorage.clear();/*情况localStorage*/

show_LocalStorage.innerHTML="已成功注销!";

btn_login.style.display='';/*显示“登录”按钮*/

inputSpan.style.display='';/*显示姓名输入框和“提交”按钮*/

}

登录

注销

请输入你的姓名:提交


注:JavaScript里的运算符“+”不仅可以数字相加还可以字符串相加。例如"123"+456="123456"

上例中localStorage.counter++;如果改成localStorage.counter=localStorage.counter+1;就会出现”11111......“

JavaScript将字符串转换成为数字可以用Number()方法,localStorage.counter=Number(localStorage.counter)+1;

HTML5网页存储的方法

以上就是关于“HTML5网页存储的方法”这篇文章的内容,相信大家都有了一定的了解,希望小编分享的内容对大家有帮助,若想了解更多相关的知识内容,请关注创新互联行业资讯频道。


文章名称:HTML5网页存储的方法
当前URL:http://hbruida.cn/article/pcgceg.html