13518219792
公司主营业务：成都网站建设、成都网站制作、移动网站开发等业务。帮助企业客户真正实现互联网宣传，提高企业的竞争能力。成都创新互联是一支青春激扬、勤奋敬业、活力青春激扬、勤奋敬业、活力澎湃、和谐高效的团队。公司秉承以“开放、自由、严谨、自律”为核心的企业文化，感谢他们对我们的高要求，感谢他们从不同领域给我们带来的挑战，让我们激情的团队有机会用头脑与智慧不断的给客户带来惊喜。成都创新互联推出昌江免费做网站回馈大家。
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"){
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 请输入你的姓名：
三、访问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网页存储的相关知识的简略介绍，当然详细使用上面的不同还得要大家自己使用过才领会。如果想了解更多，欢迎关注创新互联行业资讯频道哦！
