在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 类型，月份选择器。

HTML5规范的本地存储的更多相关文章

  1. HTML5新增的本地存储功能(笔记)

    HTML5新增的本地存储功能分为两种,分别对应两个JS对象:①本地存储对应localStorage对象,主要用于长期保存整个网站的数据(这些数据可以永久保存在客户端电脑硬盘内).②会话存储对应sess ...

  2. HTML5教程之本地存储SessionStorage

    SessionStorage: 将数据保存在session对象中,所谓session是指用户在浏览某个网站时,从进入网站到浏览器关闭所经过的这段时间会话,也就是用户浏览这个网站所花费的时间就是sess ...

  3. HTML5 使用localstorage 本地存储

    HTML 本地存储介绍 最早的 Cookies 自然是大家都知道,问题主要就是太小,大概也就 4KB 的样子,而且 IE6 只支持每个域名20个cookies,太少了.优势就是大家都支持,而且支持得还 ...

  4. HTML5学习总结——本地存储

    一.HTML4客户端存储 B/S架构的应用大量的信息存储在服务器端,客户端通过请求响应的方式从服务器获得数据,这样集中存储也会给服务器带来相应的压力,有些数据可以直接存储在客户端,传统的Web技术中会 ...

  5. HTML5开发学习:本地存储Web Sql Database

       Web Sql Database,中文翻译作"本地数据库",是随着HTML5规范加入的在浏览器端运行的轻量级数据库.    在HTML5中,大大丰富了客户端本地可以存储的内容 ...

  6. 初识html5的localStorage本地存储

    一.概述 HTML5 提供了两种在客户端存储数据的新方法: localStorage - 没有时间限制的数据存储 sessionStorage - 针对一个 session 的数据存储 之前,这些都是 ...

  7. HTML5 JS API 本地存储LocalStorage基本操作

    LocalStorage:使用方法与SessionStorage如出一辙,如下代码所示:此对象主要有两个方法:保存数据:localStorage.setItem(Key, value);读取数据:lo ...

  8. Html5中的本地存储

    Web Storage web storage页面存储是html5为数据存储在客户端提供的一项重要功能,由于web storage API能够区分会话数据与长期数据.因此,相应API也分为两种: se ...

  9. html5画图和本地存储

    <!DOCTYPE HTML><html><body> <canvas id="myCanvas" width="200&quo ...

随机推荐

  1. 使用weka进行Cross-validation实验

    Generating cross-validation folds (Java approach) 文献: http://weka.wikispaces.com/Generating+cross-va ...

  2. NOIP 2014 无线网络发射器选址

    水题..直接暴力 #include<cstdio> #include<algorithm> using namespace std; const int inf = 0x3f3 ...

  3. 关于T公司的强矩阵架构的思考

    我所在的T公司是强矩阵架构,关于这类公司,应该是不少大公司的主流架构,也就是说一个职员在公司内不仅在项目内有相应的级别,在其行政上也是有相应的级别,日常工作以项目的内容为主,但是同时也是属于行政的一员 ...

  4. hdu4436-str2int（后缀数组 or 后缀自动机）

    题意:给你一堆字符串,仅包含数字'0'到'9'. 例如 101 123 有一个字符串集合S包含输入的N个字符串,和他们的全部字串. 操作字符串很无聊,你决定把它们转化成数字. 你可以把一个字符串转换成 ...

  5. 远程控制篇：用Delphi模拟键盘输入/鼠标点击

    模拟键盘我们用Keybd_event这个api函数,模拟鼠标按键用mouse_event函数. Keybd_event函数能触发一个按键事件,也就是会产生一个WM_KEYDOWN或WM_KEYUP消息 ...

  6. hdu 3617 Happy 2009

    Happy 2009 Time Limit: 3000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total ...

  7. idhttp.post方式 调用datasnap rest 远程方法

    idhttp.get方式调用,这种比较简单,大家都会.post方式网上却没有任何成功的代码,本人也是摸索了一个上午才搞定. 分享给大家. (1)post方式调用的远程方法,方法名必须加“update” ...

  8. 如何获得网页上的swf视频教程文件？

    网上有很多免费的视频教程,但有的视频教程这能在线观看,无法离线下在,如何获得网页上的swf视频教程文件呢? 我问以"我要自学网"的视频教程为例进行讲解.这是一个我要自学网的PS视频 ...

  9. pom.xml报错

    错误太多打开文件后就不会显示,点开前边的选项卡就会提示错误信息,一般是jar包没加载全.

  10. .NET设计模式（3）：抽象工厂模式（Abstract Factory）

    ):抽象工厂模式(Abstract Factory) 抽象工厂模式(Abstract Factory) --探索设计模式系列之三 Terrylee,2005年12月12日 转载:http://terr ...