使用window.localStorage,window.localStorage记录点击次数

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>使用window.localStorage,window.localStorage记录点击次数</title>
</head>
<body>
	<button onclick="bc()">点击</button>
	<div id="result"></div>
	<script>
		//这里使用的window.localStorage 本地存储,一般存储5M,不同浏览器不同,只要不手动删除,则永久存储
		/*function bc(){
			//判断浏览器是否支持storage,不支持则提示
			console.log(window.localStorage);
			if (window.localStorage) {
				if (localStorage.count) {
					//因为localStorage只支持string类型的存储,所以这里必须转化为int 类型才可以自加
					localStorage.count = parseInt(localStorage.count)+1;
				}else{
					//localStorage 只支持 string 类型的存储,即使下面的count = 1 ,那么也会自动存储为String类型
					localStorage.count=1; 
				}
				document.getElementById("result").innerHTML= localStorage.count;
			}else{
				alert('您的浏览器不支持window.localStorage');
			}
		}*/


		//这里使用window.sessionStorage 会话存储,最多
		function bc(){
			if (window.sessionStorage) {
				if(window.sessionStorage.count){
					//因为sessionStorage只支持string类型的存储,所以这里必须转化为int 类型才可以自加
					window.sessionStorage.count = parseInt(window.sessionStorage.count) + 1;
				}else{
					//sessionStorage 只支持 string 类型的存储,即使下面的count = 1 ,那么也会自动存储为String类型
					window.sessionStorage.count = 1;
				}
				document.getElementById('result').innerHTML = window.sessionStorage.count;
			}else{
				alert('您的浏览器不支持window.sessionStorage');
			}
		}
	</script>
</body>
</html>


localStorage  sessionStorage 两个一毛一样
有三种写入方式:

var storage=window.localStorage;
//写入a字段
storage["a"]=1;
//写入b字段
storage.b=1;
//写入c字段
storage.setItem("c",3);

 

以下是随机生成一个 

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>localStorage,sessionStorage</title>
</head>
<body>
	<button onclick="cl()">点击</button>
	<div id="pg">您暂时还没有点击</div>
	<script>


		// 随机生成一个名字
		function count(){
			var arrs = ['a','b','c','d','e','f','g','h','i','j','k','l','m'];
			var str = '';
			while(true){
				//随机生成一个名称
				for (var i = 0; i < 1; i++) {
					var g = Math.floor(Math.random()*arrs.length);
					str += arrs[g];
				}
				//判断是否已经存在localStorage.str
				if (localStorage.str) {
					alert(111);
					continue;
				}
				return str;
			}
		}

		var count = count();

		//
		function cl(){
			if (localStorage) {
				if (localStorage.count) {
					//localStorage.count属性不存在返回undefined,
					//localStorage 中的 key/value 中 value的值都是以string类型存在的。
					//所以下面进行自加时,必须把localStorage转化为number数据类型。
					localStorage.count = parseInt(localStorage.count) + 1;
				}else{
					localStorage.count = 1;
				}
				document.getElementById('pg').innerHTML = '您已经点击了' + localStorage.count + '次了';
			}else{
				alert('您的浏览器不支持localStorage');
			}
		}

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

  

原文地址:https://www.cnblogs.com/Knowledge-is-infinite/p/12045427.html