16-2 基于localStorage或sessionStorage的计数器

localStorage 方法

localStorage 方法存储的数据没有时间限制。第二天、第二周或下一年之后,数据依然可用。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>HTML5</title>

<script type="text/javascript">
	/*
		数据存储在浏览器内置的数据库里
		对于不同的网站,数据存储于不同的区域,并且一个网站只能访问其自身的数据
		在谷歌浏览器中可以F12在开发面包中,找到resources中的localstore删除
	*/
	alert(localStorage.pagecount);
	if (localStorage.pagecount) {
	  localStorage.pagecount=Number(localStorage.pagecount) +1;
	} else {
	  localStorage.pagecount=1;
	}
	document.write("访问次数: "+ localStorage.pagecount + " 次");

	function clearlocalStorage(){
		localStorage.clear();
	}
</script>

</head>

<body>
<button onclick="clearlocalStorage()">清除所有localStorage</button>
</body>
</html>

sessionStorage 方法

sessionStorage 方法针对一个 session 进行数据存储。当用户关闭浏览器窗口后,数据会被删除。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>HTML5</title>
<script type="text/javascript">
	/*
		sessionStroage是基于会话级的
		浏览器窗口关闭就会自动销毁
	*/
	if (sessionStorage.pagecount) {
	  sessionStorage.pagecount=Number(sessionStorage.pagecount) +1;
	} else {
	  sessionStorage.pagecount=1;
	}
	document.write("Visits "+ sessionStorage.pagecount + " time(s).");
</script>
</head>

<body>
</body>
</html>

  

  

时间: 2024-08-14 10:18:30

16-2 基于localStorage或sessionStorage的计数器的相关文章

浅析localstorage、sessionstorage

原文链接:http://caibaojian.com/localstorage-sessionstorage.html 简介 html5 中的 web Storage 包括了两种存储方式:sessionStorage 和 localStorage. sessionStorage 用于本地存储一个会话(session)中的数据,这些数据只有在同一个会话中的页面才能访问,会话结束后数据也随之销毁.localStorage 用于存储一个域名下的需要永久存在在本地的数据,这些数据可以被一直访问,直到这些

本地存储(localStorage、sessionStorage、web Database)

一.sessionStorage和localStorage sessionStorage和localStorage两种方法都是当用户在inPut文本框中输入内容并点击保存数据按钮时保存数据,点击读取数据按钮时读取保存后的数据.不过使用sessionStorage时,只能局限于当前页面,如果关闭浏览器,数据就会丢失,下次打开浏览器就会读不到数据.如果使用localStorage时,即使浏览器关闭,下次打开浏览器仍能读取到上次被保存的数据.但是数据的保存时按不同浏览器分别进行的,也就是说,如果打开别

localStorage、sessionStorage详解,以及storage事件使用

有关localStorage和sessionStorage的特性. localStorage本身带有方法有 添加键值对:localStorage.setItem(key,value),如果key存在时,更新value. 获取键值:localStorage.getItem(key),如果key不存在返回null. 删除键值对:localStorage.removeItem(key).key对应的数据将会全部删除. 清除所有键值对:localStorage.clear().如果调用clear()方法

localStorage与sessionStorage 的区别

通过一枚页面计数器来区别localStorage与sessionStorage. 通过一个计数变量pageconut,每刷新页面,增加的是localStorage的数量,而sessionStorage只记录当前访问数量: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta http-equiv="content-type" content=&quo

localStorage和sessionStorage的使用方法和一些特性介绍

本文主要介绍的是localStorage和sessionStorage的使用方法和一些特性,以及一些其他的存储方式的比较. 客服端存储方案包括以下几种: 1.Cookie 2.UserData 3.Flash SharedObject 4.Google Gears 5.Web SQL Database 6.WebStorage 7.IndexedDB(Indexed Database) 把Cookie抛开,以上几种存储方案2-5不建议使用,原因见下文详解.把Cookie抛开不论,是因为它是不可缺

使用HTML5 Web存储的localStorage和sessionStorage方式

localStorage(本地存储),可以长期存储数据,没有时间限制,一天,一年,两年甚至更长,数据都可以使用.sessionStorage(会话存储),只有在浏览器被关闭之前使用,创建另一个页面时同意可以使用,关闭浏览器之后数据就会消失. HTML5 的本地存储 API 中的 localStorage 与 sessionStorage 在使用方法上是相同的,区别在于 sessionStorage 在关闭页面后即被清空,而 localStorage 则会一直保存.我们这里以 localStora

hybrid app开发中用到的html5新特性localStorage、sessionStorage和websql database

最近在项目中进行hybrid app开发,项目中有大量的js代码运行在android设备上.使用到了很多HTML5的新特性,之前没有遇到过,不了解,这里记录下增加点前端的知识.混合式app开发中,经常需要使用缓存功能,比如你在页面表单控件上输入了数据,你希望下次退出app再次进来的时候还能看到这些数据:比如你的项目中有保存草稿的功能,只是先将数据临时存储在本地,以后再提及到服务器.这就需要我们将数据持久地存储在本地,这就需要用到HTML5中的本地化存储解决方案.本文主要介绍下sessionSto

localStorage、sessionStorage

既然涉及到HTML5知识,那么必定会存在一定的兼容性问题,这里就涉及到浏览器的支持情况了. 浏览器支持情况: Internet Explorer 8+, Firefox, Opera, Chrome, 和 Safari支持Web 存储. 注意: Internet Explorer 7 及更早IE版本不支持web 存储. 这里涉及到两种方式,即localStorage与sessionStorage (1).localStorage: localStorage(本地存储),可以长期存储数据,没有时间

深入了解浏览器存储:对比Cookie、LocalStorage、sessionStorage与IndexedDB

摘要: 对比Cookie.LocalStorage.sessionStorage与IndexedDB 作者:浪里行舟 Fundebug经授权转载,版权归原作者所有. 前言 随着移动网络的发展与演化,我们手机上现在除了有原生 App,还能跑"WebApp"--它即开即用,用完即走.一个优秀的 WebApp 甚至可以拥有和原生 App 媲美的功能和体验.WebApp 优异的性能表现,有一部分原因要归功于浏览器存储技术的提升.cookie存储数据的功能已经很难满足开发所需,逐渐被WebSto