您好！欢迎访问家园网-www.jy.wang!

家园网

您当前的位置：首页 > 计算机技术 > HTML

Web Storage实现页面计数器

网络 作者：本站 点击：

Web Storage实现页面计数器，其中，sessionStorage和localStorage显示的计数不一样，请看详细讲解。

html代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>sessionStorage与localStorage区别</title>
</head>
<link href="css/css.css" type="text/css" rel="stylesheet">
<body>
<div class="mr-cont">
<h1 align="center">计数器</h1>
<p class="msg" id="msg_1"> </p>
<p class="form_item">
  <label for="">要保存的数据：</label>
  <input type="text" name="text-1" value="" id="text-1"/>
</p>
<p class="form_item">
  <input type="button" name="btn-1" value="session保存" id="btn-1"/>
  <input type="button" name="btn-2" value="session读取" id="btn-2"/>
</p>
<p class="form_item">
  <input type="button" name="btn-3" value="local保存" id="btn-3"/>
  <input type="button" name="btn-4" value="local读取" id="btn-4"/>
</p>
<p class="count_wrap"> session计数：<span class="count" id='session_count'></span>&nbsp;&nbsp;
  local计数：<span class="count" id='local_count'></span></p>
  </div>
<script src="js/js.js"></script>
</body>
</html>


js代码：

// JavaScript Document
function getE(ele){   //自定义一个getE()函数
                return document.getElementById(ele);   //返回并调用document对象的getElementById方法输出变量
            }  
            var text_1 = getE('text-1'),   //声明变量并为其赋值
                mag = getE('msg_1'),  
                btn_1 = getE('btn-1'),  
                btn_2 = getE('btn-2'),  
                btn_3 = getE('btn-3'),  
                btn_4 = getE('btn-4');  
            btn_1.onclick = saveSessionStorage;  
            btn_2.onclick = loadSessionStorage;  
            btn_3.onclick = saveLocalStorage;  
            btn_4.onclick = loadLocalStorage;  
               
            function saveSessionStorage(){  
                sessionStorage.setItem('msg',text_1.value + ' session');
            }  
            function loadSessionStorage(){  
                mag.innerHTML = sessionStorage.getItem('msg');  
            }  
            function saveLocalStorage(){  
                localStorage.setItem('msg',text_1.value + ' local');
            }  
            function loadLocalStorage(){  
                mag.innerHTML = localStorage.getItem('msg');  
            }  
            //记录页面次数   
            var local_count = localStorage.getItem('a_count')?localStorage.getItem('a_count'):0;  
            getE('local_count').innerHTML = local_count;  
            localStorage.setItem('a_count',+local_count+1);  
           
            var session_count = sessionStorage.getItem('a_count')?sessionStorage.getItem('a_count'):0;  
            getE('session_count').innerHTML = session_count;  
            sessionStorage.setItem('a_count',+session_count+1);


css代码：

@charset "utf-8";
/* CSS Document */
.mr-cont{
	width: 800px;
	margin: 0 auto;
	border: 1px solid #f00;
}
.mr-cont>p{
	margin-left: 200px;
}


这是关于Web Storage实现页面计数器的完整代码讲解。我将逐行解释HTML和JavaScript代码，并详细说明为什么session计数和local计数表现不同。

HTML代码逐行讲解


<!DOCTYPE html>

声明文档类型：告诉浏览器这是一个HTML5文档，确保浏览器以标准模式渲染页面。


<html>
<head>
<meta charset="utf-8" />
<title>sessionStorage与localStorage区别</title>
</head>

HTML结构开始：设置文档字符编码为UTF-8，页面标题为"sessionStorage与localStorage区别"。


<link href="css/css.css" type="text/css" rel="stylesheet">

引入外部样式表：链接CSS文件用于页面样式美化（虽然未提供具体样式内容）。


<body>
<div class="mr-cont">
<h1 align="center">计数器</h1>

页面主体：创建一个容器div，标题为"计数器"，居中对齐。


<p class="msg" id="msg_1"> </p>

消息显示区域：一个空段落，id为"msg_1"，用于显示从存储中读取的数据。


<p class="form_item">
  <label for="">要保存的数据：</label>
  <input type="text" name="text-1" value="" id="text-1"/>
</p>

输入框区域：文本输入框，用户可以输入要保存的数据，id为"text-1"。


<p class="form_item">
  <input type="button" name="btn-1" value="session保存" id="btn-1"/>
  <input type="button" name="btn-2" value="session读取" id="btn-2"/>
</p>

session操作按钮：两个按钮分别用于保存数据到sessionStorage和从sessionStorage读取数据。


<p class="form_item">
  <input type="button" name="btn-3" value="local保存" id="btn-3"/>
  <input type="button" name="btn-4" value="local读取" id="btn-4"/>
</p>

local操作按钮：两个按钮分别用于保存数据到localStorage和从localStorage读取数据。


<p class="count_wrap"> session计数：<span class="count" id='session_count'></span>&nbsp;&nbsp;
  local计数：<span class="count" id='local_count'></span></p>

计数器显示区域：显示session计数和local计数的数值，两个span元素分别用于显示对应的计数。


<script src="js/js.js"></script>

引入JavaScript文件：链接外部的JS文件，包含所有交互逻辑。


JavaScript代码逐行讲解


// JavaScript Document
function getE(ele){   //自定义一个getE()函数
    return document.getElementById(ele);   //返回并调用document对象的getElementById方法输出变量
}

定义getE函数：这是一个简化DOM元素获取的辅助函数，通过id获取页面元素，减少重复代码。


var text_1 = getE('text-1'),   //声明变量并为其赋值
    mag = getE('msg_1'),   
    btn_1 = getE('btn-1'),   
    btn_2 = getE('btn-2'),   
    btn_3 = getE('btn-3'),   
    btn_4 = getE('btn-4');

获取DOM元素：一次性获取页面中所有需要用到的元素，提高代码执行效率。


btn_1.onclick = saveSessionStorage;   
btn_2.onclick = loadSessionStorage;   
btn_3.onclick = saveLocalStorage;   
btn_4.onclick = loadLocalStorage;

绑定点击事件：为四个按钮分别绑定对应的处理函数，当用户点击按钮时执行相应的存储或读取操作。


function saveSessionStorage(){   
    sessionStorage.setItem('msg',text_1.value + ' session');
}

session保存函数：将用户在输入框中输入的内容加上" session"后缀，以键名'msg'存储到sessionStorage中。


function loadSessionStorage(){   
    mag.innerHTML = sessionStorage.getItem('msg');   
}

session读取函数：从sessionStorage中读取键名为'msg'的数据，并显示在id为'msg_1'的元素中。


function saveLocalStorage(){   
    localStorage.setItem('msg',text_1.value + ' local');
}

local保存函数：将用户输入的内容加上" local"后缀，以键名'msg'存储到localStorage中。


function loadLocalStorage(){   
    mag.innerHTML = localStorage.getItem('msg');   
}

local读取函数：从localStorage中读取键名为'msg'的数据，并显示在id为'msg_1'的元素中。


//记录页面次数   
var local_count = localStorage.getItem('a_count')?localStorage.getItem('a_count'):0;   
getE('local_count').innerHTML = local_count;   
localStorage.setItem('a_count',+local_count+1);

local计数器逻辑：

  • 第1行：检查localStorage中是否已有键名为'a_count'的数据，如果有则获取其值，否则初始化为0

  • 第2行：将获取到的计数值显示在local计数器的span元素中

  • 第3行：将计数值加1后重新存储到localStorage中


var session_count = sessionStorage.getItem('a_count')?sessionStorage.getItem('a_count'):0;   
getE('session_count').innerHTML = session_count;   
sessionStorage.setItem('a_count',+session_count+1);

session计数器逻辑：

  • 第1行：检查sessionStorage中是否已有键名为'a_count'的数据，如果有则获取其值，否则初始化为0

  • 第2行：将获取到的计数值显示在session计数器的span元素中

  • 第3行：将计数值加1后重新存储到sessionStorage中

为什么session计数和local计数不一样？

核心区别：

1. 生命周期不同

  • localStorage：数据永久存储，除非用户手动清除浏览器数据或通过代码删除，否则数据会一直存在。即使关闭浏览器、重启电脑，数据仍然保留。

  • sessionStorage：数据仅在当前会话（session）中有效。当用户关闭当前浏览器标签页或窗口时，数据会被清除。

2. 计数器表现差异

当页面首次加载时，两者的初始值都是0，然后各自加1，都显示为1。

但当你刷新页面时：

  • local计数：由于localStorage数据永久保存，刷新时会读取到上次存储的值（1），然后加1变为2，显示2

  • session计数：刷新页面时，sessionStorage数据仍然在当前会话中存在，所以也会读取到上次的值（1），加1变为2，显示2

关键差异场景：
当你关闭浏览器标签页后重新打开页面时：

  • local计数：会继续累加，因为数据永久保存在localStorage中

  • session计数：会重置为1，因为sessionStorage随着标签页关闭而被清除了

当你复制标签页时：

  • local计数：新标签页会继续使用同一个localStorage数据

  • session计数：新标签页会有独立的sessionStorage，计数从1开始

实际演示效果：

假设你进行了以下操作序列：

  1. 首次打开页面：两个计数都显示为1

  2. 刷新页面：两个计数都显示为2

  3. 关闭标签页后重新打开：local计数显示为3，session计数显示为1

  4. 再刷新一次：local计数显示为4，session计数显示为2

这就是为什么session计数和local计数不一样的根本原因——它们的数据存储生命周期不同，导致在不同的使用场景下会有不同的累加行为。

标签：