使用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>