HTML5规范的本地存储 - 柠檬先生_H5之家 - 中国HTML5教程资源分享第一站

在HTML5 中定义了两种本地存储的，Web Storage 和本地数据库 SQL Database .
　　用来检查判断浏览器是否支持 Web Storage
　　if(window.localStorage){
　　　　//浏览器支持localStorage
　　}
　　if(window.sessionStorage){
　　　　//浏览器支持sessionStorage
　　}

localStorage 主要作用是将数据保存在客户端中，也就是用户的计算机上。是基于域的，在该域的任何网页都可以访问，在不同设备上存储的是不同的。
　　在本地存储一个字符串类型的数据 key/value setItem
　　　　localStorage.setItem("name","非一般的黑客")
　　通过getItem 方法读取key 值为name的值。
　　　　localStorage.getItem("name")
　　也可以通过索引去读取，localStorage.key(1)
　　删除指定key为“name”的item
　　　　localStorage.removeItem("name")
　　删除localStorage 所有key/value

存储JSON 格式的数据
　　//定义JSON 格式字符串。
　　　　var userData ={
　　　　　　name:"Sankyu Name",
　　　　　　account:"sankyu",
　　　　　　level:1,
　　　　　　disabled:true
　　　　}
　　//存储userData 数据。
　　　　localStorage.setItem("userData",JSON.stringify(userData));
　　//读取userdata 数据并赋值给新变量newUserData
　　　　var newUserDta = JSON.parse(localStorage.getItem("userData"))
　　//删除本地存储的item
　　　　localStorage.removeItem("userData")
　　//输出对象
　　　　alert(newUserData);

采用重新设置的item 方案修改JSON 对象数据。

　　//定义JSON 格式字符串。
　　　　var userData ={
　　　　　　name:"Sankyu Name",
　　　　　　account:"sankyu",
　　　　　　level:1,
　　　　　　disabled:true
　　}
　　//存储userData 数据。
　　　　localStorage.setItem("userData",JSON.stringify(userData));

　　//读取userdata 数据并赋值给新变量newUserData
　　　　var newUserDta = JSON.parse(localStorage.getItem("userData"));

　　　　userData.name = "new Sankyu Name";

　　　　localStorage.setItem("userData",JSON.stringify(userData))

　　　　alert(userData.name)

　　　　alert(JSON.parse(localStorage.getItem("userData")).name);

　　　　采用点语法更新JSON 对象内数据

　//定义JSON 格式字符串。
　　　　var userData ={
　　　　　　name:"Sankyu Name",
　　　　　　account:"sankyu",
　　　　　　level:1,
　　　　　　disabled:true
　　　　}

//存储userData 数据。
　　　　localStorage.setItem("userData",JSON.stringify(userData));

　　//读取userdata 数据并赋值给新变量newUserData
　　　　var newUserDta = JSON.parse(localStorage.getItem("userData"))

　　　　JSON.parse(localStorage.getItem("userData")).name = "new Sankyu Name";

　　　　userData.name = "new Sankyu Name";

　　　　alert(userData.name)

　　　　alert(JSON.parse(localStorage.getItem("userData")).name);

sessionStorage主要作用是将数据保存在当前回话中，存储的数据的生命周期只保存在存储的当前窗口或由当前窗口
　　　　新建的新窗口，直到想关联的标签页关闭。

　　　　Storage 事件监听
　　　　　　创建一个页面该页面的主要功能是操作LocalStorage
　　　　　　window.onload = function(){
　　　　　　　　　　localStorage.clear();
　　　　　　　　　　localStorage.setItem("userData","storage demo");
　　　　　　　　　　localStorage.setItem("userData","storage event demo");
　　　　　　};
　　新增一个页面：
　　　　window.onload = function (){
　　　　　　window.addEventListener("storage",function(e){
　　　　　　　　console.log(e);
　　　　　　},true)
　　　　}

离线应用：

　　离线与缓存，都是为了更好地缓存各种文件以提高读取的速度，网页缓存依赖于网络的存在，二离线应用在离线下仍然可以。
　　页面缓存主要是缓存当前页面的相关内容，页仅限于当前页面的读取。
　　if(window.applicationCache){
　　　　//浏览器支持离线应用，在此编写离线应用功能。
　　}
　　mainfest 文件、
　　　　<html mainfwst="cache.manifest">

　　applicationCache 对象和事件。
　　applicationCache 对象记录着本地缓存的各种状态及事件,可以通过 window.applicationCache.status 获得。

HTML5表单元素。
　　1.form 属性。
　　　　<input form=testform> 外部的<input>就属于form 表单范围。
　　2.placeholder 属性未输入状态下给出文本框的提示内容。
　　　　<input type="text" placeholder="请输入内容"/>
　　3. autofocus 控件自动获得焦点。
　　　　<input type="text" autofocus>
　　4.required 必填属性，如果表单中存在required 属性的元素时，如果元素为空，则无法提交表单。
　　　　<input type="text" required/> 　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　
移动web表单的input类型，
　　1.search 主要用于搜索关键词的文本框类型。外观为圆角文本框。
　　2.email 主要用于输入E-mail 地址的文本框，会根据当前的文本框类型显示想对应的键盘。
　　3.numner 主要用于输入数字的文本框类型，可以配合min 属性 max 属性，以及step 属性。
　　4.range 主要是一种数值范围输入文本框，一种滑动输入方式，需要配合 min max range 等属性使用。ios Android 内置浏览器都不支持。
　　5.tel 主要是一种供用户输入电话号码的文本框，提供数字键盘输入法。
　　6.url 主要是一种输入URL 地址的文本框类型，提供的输入法是网址输入法键盘。