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

时间：2022-05-26 22:53:42
<!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>

　　

相关文章