HTML5网页存储的方法

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

　　一、认识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

　　从localStorage读取数据

　　二、删除localStorage

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

　　window.localStorage.removeItem("userdata");

　　deletewindow.localStorage.userdata;

　　delete.window.localStorage["userdata"];

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

　　localStorage.clear();

　　请输入你的姓名：

　　存储到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();

　　登录

　　注销

　　请输入你的姓名：提交

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

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

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

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