HTML5网页存储的相关知识

这篇文章主要为大家详细介绍了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类型的差异
Web Storage类型生命周期有效范围
localStorage执行删除命令时才会消失同一网站的网页可以跨窗口和分页
sessionStorage浏览器窗口或分页(tab)关闭就会消失仅对当前浏览器窗口或分页有效

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

if(typeof(Storage)=="undefined"){
	alert("您的浏览器不支持Web Storage");
}
else{
	//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;




网页存储localStorage




请输入你的姓名:


二、删除localStorage

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

window.localStorage.removeItem("userdata");

delete window.localStorage.userdata;

delete.window.localStorage["userdata"];

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

localStorage.clear();




网页存储localStorage




请输入你的姓名:


HTML5网页存储的相关知识

三、访问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();




网页存储sessionStorage






请输入你的姓名:



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

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

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

以上就是HTML5网页存储的相关知识的简略介绍,当然详细使用上面的不同还得要大家自己使用过才领会。如果想了解更多,欢迎关注创新互联行业资讯频道哦!


文章标题:HTML5网页存储的相关知识
本文地址:http://bzwzjz.com/article/jppihs.html

其他资讯

Copyright © 2007-2020 广东宝晨空调科技有限公司 All Rights Reserved 粤ICP备2022107769号
友情链接: 营销型网站建设 app网站建设 成都网站设计 成都定制网站建设 成都营销网站建设 外贸营销网站建设 网站建设方案 成都网站设计 重庆手机网站建设 成都网站建设 成都网站制作 高端网站设计 成都企业网站建设公司 营销型网站建设 成都营销网站制作 企业网站建设公司 移动手机网站制作 四川成都网站制作 网站建设开发 企业网站设计 成都网站建设 网站建设方案