zoukankan      html  css  js  c++  java
  • 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>
    

      

      

  • 相关阅读:
    解决html中刷新页面后checkbox还选中的问题
    初始化spring容器的几种方法
    在web.xml中配置spring配置文件的路径
    查找算法
    排序算法
    ORACLE TO_CHAR,TO_DATE函数格式说明
    ORACLE TO_DATE函数
    ORACLE SUBSTR函数
    ORACLE学习笔记
    Linux 查看端口占用情况
  • 原文地址:https://www.cnblogs.com/1020182600HENG/p/7077145.html
Copyright © 2011-2022 走看看