在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 地址的文本框类型， 提供的输入法是网址输入法键盘。不是广泛支持的 input 类型
datetime 类型，日期和时间文本框（含时区）。 datetime-local 类型，日期和时间文本框（不含时区）。 Time 类型，时间选择器文本框。 Date 类型， 日期选择器文本框。 Week 类型，年的周号选择器。 Month 类型，月份选择器。