html5 本地存储----localstorage初体验

HTML5虽未来到其鼎盛时期,但这并不妨碍我们在实际项目中渐进使用HTML5的一些特性。就我所做的项目而言,应用的HTML5相关特性有:data-自定义属性、placeholder、以及email类型input文本框。最近了解了一下html的本地存储功能(例如cookies和localstorage),今天主要要和大家分享的是localstorage的一些基础常识:

废话不多说直接上代码(有注释),大家可以看看:

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>

</head>
<body>

    <script type="text/javascript" src="js/jquery.js"></script>

	<script type="text/javascript">
    	$(function(){
    		if(localStorage.example) {
    			localStorage.example = Number(localStorage.example)+1;
    		}else {
    			localStorage.example = 1;
    		}
    		console.log(localStorage.example);
    		var a = NaN;
    		 console.log(typeof a);

    		// get setItem方法设值:感觉用getItem更美观,容易读懂
			localStorage.setItem("hello", "world");
			localStorage.setItem("zhangsan", "lisi");
			//取值:
			console.log(localStorage.getItem("hello"));
			console.log(localStorage.getItem("zhangsan"));
    	});

	</script>
</body>
</html>

版权声明:本文为博主原创文章,未经博主允许不得转载。

时间: 2024-11-05 15:50:49

html5 本地存储----localstorage初体验的相关文章

HTML5本地存储LocalStorage和sessionStorage

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

HTML5本地存储localStorage与sessionStorage

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

HTML5本地存储localStorage、sessionStorage基本用法、遍历操作、异常处理等

HTML5 的本地存储 API 中的 localStorage 与 sessionStorage 在使用方法上是相同的,区别在于 sessionStorage 在关闭页面后即被清空,而 localStorage 则会一直保存.我们这里以 localStorage 为例,简要介绍下 HTML5 的本地存储,并针对如遍历等常见问题作一些示例说明. localStorage 是 HTML5 本地存储的 API,使用键值对的方式进行存取数据,存取的数据只能是字符串.不同浏览器对该 API 支持情况有所差

HTML5 本地存储 LocalStorage

说到本地存储,这玩意真是历尽千辛万苦才走到HTML5这一步,之前的历史大概如下图所示: 最早的Cookies自然是大家都知道,问题主要就是太小,大概也就4KB的样子,而且IE6只支持每个域名20个cookies,太少了.优势就是大家 都支持,而且支持得还蛮好.很早以前那些禁用cookies的用户也都慢慢的不存在了,就好像以前禁用javascript的用户不存在了一样. userData是IE的东西,垃圾.现在用的最多的是Flash吧,空间是Cookie的25倍,基本够用.再之后Google推出了

HTML5本地存储-localStorage和sessionStorage

HTML5WebStorage本地存储 WebStorage是用来实现客户端存储数据,大家都知道之前的Cookie就是客户端存储的一种方式,今天看一看html5新增的本地存储方式:localStorage和sessionStorage. localStorage:存储的数据会一直存在本地客户端,即使浏览器关闭了也会存在: sessionStorage: 只是针对同一个 session 的数据存储,打开一个新来浏览器窗口或者窗口一旦关闭数据就没了.  既然知道了这两种新的本地存储方式,那怎么用那?

HTML5 本地存储 localStorage、sessionStorage 的遍历、存储大小限制处理

HTML5 的本地存储 API 中的 localStorage 与 sessionStorage 在使用方法上是相同的,区别在于 sessionStorage 在关闭页面后即被清空,而 localStorage 则会一直保存.我们这里以 localStorage 为例,简要介绍下 HTML5 的本地存储,并针对如遍历等常见问题作一些示例说明. localStorage 是 HTML5 本地存储的 API,使用键值对的方式进行存取数据,存取的数据只能是字符串.不同浏览器对该 API 支持情况有所差

HTML5本地存储localStorage、sessionStorage及IE专属UserData

By:王美建 from:http://www.cnblogs.com/wangmeijian/p/4518606.html 转载请保留署名和出处! 在客户端存储数据用的最普遍的方式非cookie莫属,随着HTML5的普及,新的本地存储方式localStorage和sessionStorage将在标准浏览器上大展身手.localStorage和sessionStorage是HTML5的新特性之一,说是新特性,其实微软公司早在IE8上就已经支持localStorage和sessionStorage这

HTML5本地存储 localStorage

HTML5的本地存储是大势所趋,如果仅存储在内存中,则是sessionStorage,他们的语法都是一样,仅仅是一个存储在本地文件系统中,另一个存储在内存中(随着浏览器的关闭而消失),其语句如下: localStorage.setItem('a', 'xxxxxx'); // 设置 localStorage.getItem('a'); // 获取 localStorage.removeItem('a'); // 删除 下面说说有关localStorage和sessionStorage的特性. 1

Html5本地存储LocalStorage

HTML5 提供了两种在客户端存储数据的新方法: localStorage - 没有时间限制的数据存储 sessionStorage - 针对一个 session 的数据存储 在浏览器中打开审查元素(如谷歌F12),在Resources下面可以查看里面的数据. localStorage提供了几个方法: 1.存储:localStorage.setItem(key,value);或localStorage.key="value"; 如果key存在时,更新value 2.获取:localSt