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 地址的文本框类型, 提供的输入法是网址输入法键盘。

  不是广泛支持的 input 类型     datetime 类型,日期和时间文本框(含时区)。     datetime-local 类型,日期和时间文本框(不含时区)。     Time 类型,时间选择器文本框。     Date 类型, 日期选择器文本框。     Week 类型,年的周号选择器。     Month 类型,月份选择器。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏瞎说开发那些事

RPA解决网页元素随机变化的问题

22860
来自专栏一个会写诗的程序员的博客

React State(状态): React通过this.state来访问state,通过this.setState()方法来更新stateReact State(状态)

React 把组件看成是一个状态机(State Machines)。通过与用户的交互,实现不同状态,然后渲染 UI,让用户界面和数据保持一致。 React 里...

15430
来自专栏IMWeb前端团队

react组件性能优化探索实践

React本身就非常关注性能,其提供的虚拟DOM搭配上Diff算法,实现对DOM操作最小粒度的改变也是非常的高效。然而其组件渲染机制,也决定了在对组件进行更新时...

27470
来自专栏玄魂工作室

[翻译]整合鼠标、触摸 和触控笔事件的

Html5 Pointer Event Api 原文链接 https://mobiforge.com/design-development/html5-poin...

35960
来自专栏deepcc

canvas 绘点图

31650
来自专栏liulun

ASP.NET Core教程【二】从保存数据看Razor Page的特有属性与服务端验证

前文索引: ASP.NET Core教程【一】关于Razor Page的知识 在layout.cshtml文件中,我们可以看到如下代码: <a asp-page...

33850
来自专栏Ryan Miao

照着官方文档学习react

准备 先要准备环境。搭建一个基于webpack的react环境:Hello ReactJS. 一些要点 我在想是否应该完整的记录照抄的过程呢。毕竟已经开始一段,...

39370
来自专栏菩提树下的杨过

Flash/Flex学习笔记(4):如何打开网页及Get/Post数据

flash终究只是客户端技术,所以很多时候还是需要与服务端技术(比如asp,asp.net,jsp,php之类)进行数据交互的,下面的代码演示了如何在flash...

24970
来自专栏SpringBoot

springmvc + h5(进度条)文件上传

41610
来自专栏Coding迪斯尼

实现盒子动画和键盘特效

11120

扫码关注云+社区

领取腾讯云代金券