HTML5之网页存储

HTML5 网页存储 Web Storage

一、认识Web Storage

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

Web Storage的容量由客户端浏览器决定，通常1MB~5MB。

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

Web Storage以一组key-html' target='_blank'>value对应保存数据。

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

检测浏览器是否支持Web Storage，语法如下：

if(typeof(Storage)== undefined ){ span >
注意：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;
 span >
二、删除localStorage
要想删除某一条localStorage数据，可以调用removeItem方法或者delete属性进行删除。
window.localStorage.removeItem( userdata 
delete window.localStorage.userdata;
delete.window.localStorage[ userdata 
要想删除全部的localStorage数据，可以使用clear()方法。
localStorage.clear();
 !DOCTYPE html  html  head  title 网页存储localStorage /title  script type= text/javascript function onLoad(){ if(typeof(Storage)== undefined ){ alert( Sorry！你的浏览器不支持Web Storage  else{ btn_save.addEventListener( click ,saveToLocalStorage); btn_load.addEventListener( click ,loadFromLocalStorage); btn_clear.addEventListener( click ,clearLocalStorage);function saveToLocalStorage(){ localStorage.username = inputname.value;function loadFromLocalStorage(){ show_LocalStorage.innerHTML = localStorage.username+ 你好，欢迎来到我的网站！ function clearLocalStorage(){ strong localStorage.clear(); /strong  show_LocalStorage.innerHTML = localStorage.username; /script  /head  body onload= onLoad() 请输入你的姓名： input type= text id= inputname value= / br/  p id= show_LocalStorage /p br /  button id= btn_save 存储到localStorage /button  button id= btn_load 从localStorage读取数据 /button  button id= btn_clear 清除localStorage数据 /button  /body  /html 
三、访问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();
 span >

注：JavaScript里的运算符“+”不仅可以数字相加还可以字符串相加。例如 123 +456= 123456 
上例中localStorage.counter++;如果改成localStorage.counter = localStorage.counter +1;就会出现”11111......“
JavaScript将字符串转换成为数字可以用Number()方法，localStorage.counter =Number(localStorage.counter )+1;
以上就是HTML5之网页存储 的详细内容，html教程        
郑重声明：本文版权归原作者所有，转载文章仅为传播更多信息之目的，如作者信息标记有误，请第一时间联系我们修改或删除，多谢。