HTML5网页存储的方法

这篇“HTML5网页存储的方法”文章的知识点大部分人都不太理解，所以小编给大家总结了以下内容，内容详细，步骤清晰，具有一定的借鉴价值，希望大家阅读完这篇文章能有所收获，下面我们一起来看看这篇“HTML5网页存储的方法”文章吧。
　　一、认识WebStorage
　　WebStorage是一种将少量数据存储在客户端（client）磁盘的技术。只要支持WebStorageAPI规格的浏览器，网页设计者都可以使用JavaScript来操作它，我们先了解一下WebStorage。
　　WebStorage的容量由客户端浏览器决定，通常1MB~5MB。
　　WebStorage纯粹运行客户端，不会每次网页请求连带发送给服务端。
　　WebStorage以一组key-value对应保存数据。
　　WebStorage提供两种方式将数据保存在客户端：一种是localStorage，一种是sessionStorage，两者的差异在于申明周期和有效范围。
　　表一WebStorage类型的差异
　　WebStorage类型生命周期有效范围
　　localStorage 执行删除命令时才会消失同一网站的网页可以跨窗口和分页
　　sessionStora免费云主机域名ge 浏览器窗口或分页（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;
　　

　　
　　
　　
　　
　　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读取数据
　　
　　

相关推荐: JavaScript数据类型使用实例分析

这篇文章主要讲解了“JavaScript数据类型使用实例分析”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“JavaScript数据类型使用实例分析”吧！（1）布尔boolean 布尔（逻辑）只能有两个值：tr…