Html5 本地存储 实现刷新页面数据依然存在

1.首先需要引入jquery

2.

<body>
a<input type="text" id="a"><br>
b<input type="text" id="b"><br>
<button onclick="test()">click</button>
<button onclick="c()">clear</button>
<script>
$("input").each(function(){                               //遍历input标签给其赋值
	var key = $(this).attr(‘id‘);
	$(this).val(localStorage.getItem(key));

})

	function test(){
		$("input").each(function(){              //遍历input标签将第一次的值存到localStorage中
			var key = $(this).attr(‘id‘);
			var value = $(this).val();
			localStorage.setItem(key,value);

		})
	}

	function c(){                      //清除本地存储
		localStorage.clear();
	}

</script>
</body>
时间: 2024-12-29 07:56:16

Html5 本地存储 实现刷新页面数据依然存在的相关文章

HTML5本地存储实例页面

HTML代码: <ul id="edit" contenteditable="true"> <li>修改我吧,然后刷新页面看看,^_^</li> </ul> JS代码: var edit = document.getElementById("edit"); edit.onblur = function(){ localStorage.setItem("tododata", thi

HTML5本地存储localStorage与sessionStorage

在最近的项目中用到了html5的本地存储,下面总结一下. 1.html5几种存储形式 本地存储(localStorage && sessionStorage) 离线缓存(application cache) indexedDB 和 webSQL 2.localStorage && sessionStorage 过期时间:localStorage 永久存储,永不失效除非手动删除 sessionStorage 浏览器重新打开后就消失了 大小:每个域名是5M. 注:cookie一

(转)HTML5 本地存储

原文:http://www.cnblogs.com/rainman/archive/2011/06/22/2086069.html HTML5 本地存储 1.sessionStorage 2.localStorage 3.Database Storage 4.globalStorage 5.兼容性 参考文献 本地持久化存储一直是本地客户端程序优于 web 程序的一个方面.对于本地应用程序,操作系统会一共一个抽象层,用于存储和获取特定于应用程序的数据,例如用户设置或者运行时状态.这些值可以被存储于

HTML5 本地存储Web Storage简单了解

?HTML5本地存储规范,定义了两个重要的API :Web Storage  和  本地数据库Web SQL Database. 本地存储Web Storage 实际上是HTML4的cookie存储机制的一个改进版本,然而两种机制的功能又不相同.web storage 的作用是在网站中把有用的信息存储到本地的计算机 或移动设备上,然后根据实际需要从本地读取信息. web storage 提供了两种存储类型API接口:sessionStorage 和 localStorage .sessionSt

HTML5本地存储(转)

html5带给我们的不仅仅是更多语义丰富的标签,还有更多新特性,比如本地存储.要在客户端保存用户一些数据,我们首选使用 cookie,但是cookie最多只能存储4kb,而HTML5的本地存储localStorage可以存储5M的数据,这将对web开发以及移动终端 应用带来革命性的转变. 查看演示DEMO 目前主流浏览器都支持localStorage本地存储,而微软从IE8就出人意料的开始支持localStorage.本文将和您一起分享HTML5本地存储localStorage相关知识,通过实例

利用HTML5开发Android(7)---HTML5本地存储之Database Storage

在上一篇<HTML5本地存储之Web Storage篇>中,简单介绍了如何利用localStorage实现本地存储:实际上,除了sessionStorage和localStorage外,HTML5还支持通过本地数据库进行本地数据存储,HTML5采用的是"SQLite"这种文件型数据库,该数据库多集中在嵌入式设备上,熟悉IOS/Android开发的同学,应该对SQLite数据库比较熟悉. HTML5中的数据库操作比较简单,主要有如下两个函数: 1.通过openDatabase

利用HTML5开发Android(4)---HTML5本地存储之Web Storage

Web Storage是HTML5引入的一个非常重要的功能,可以在客户端本地存储数据,类似HTML4的cookie,但可实现功能要比cookie强大的多,cookie大小被限制在4KB,Web Storage官方建议为每个网站5MB. Web Storage又分为两种: sessionStorage localStorage 从字面意思就可以很清楚的看出来,sessionStorage将数据保存在session中,浏览器关闭也就没了:而localStorage则一直将数据保存在客户端本地: 不管

HTML5本地存储LocalStorage和sessionStorage

以前用wordpress做博客的时候,我做了个点赞的功能.设计这个点赞功能的时候,为防止访客不断刷赞,得做个时间间隔限制,首先我的设计方案是在数据库里记录ip和点赞的时间,后来一想那还得维护数据库(其实是觉得都没人点赞还弄得那么严格搞什么),果断改成把数据放到本地保存. 本地存储数据首先想到得是cookie和html5的 localStorage. cookie兼容性好,但是存储的数据量太少;localStorage存储量大,但是兼容性不是很好,毕竟ie6之流还是有不少份额的.最后考虑到 htm

我的项目9 网页之间传值二 HTML5本地存储

在我的项目1中写到过网页之间传值,但是那种方式在andriod4.0和以下版本就传不过去了,于是乎,就打起了HTML5本地存储的注意.大家看一下代码就知道什么意思了: 发送数据页面: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script type="text/javascript">