本文介绍如何使用JavaScript结合localStorage和sessionStorage构建一个简易的英语单词测试系统。系统包含单词录入、随机测试及结果统计三个页面，通过遍历存储对象生成题库，利用sessionStorage记录答题对错，实现完整的学习闭环。
系统概述与实现原理
本文分享了一个使用JavaScript编写的简易单词测试题库的具体实现方案，供读者参考学习。
该系统的核心在于利用Web Storage技术，即sessionStorage和localStorage，来构建英语单词题库。
由于系统涉及三个主要页面，此处仅展示部分HTML和CSS代码作为参考。
<div class="main">
<h1>单词录入</h2>
<hr><br>
<span>English:</span><input type="text" name="en"><br>
<span>中文:</span><input type="text" name="cn"><br>
<button class="btn" value="">保存</button><br><br>
<hr style=" border-top:10px dotted #4285f4;" /><br><br>
<button class="start">开始测试</button>
<span class="num">你已经录入0组词汇</span>
</div>单词录入页面实现
以下是第一个页面的JavaScript逻辑实现。
var en = document.getElementsByName("en")[0];
var cn = document.getElementsByName("cn")[0];
var btn = document.getElementsByClassName("btn")[0];
var start = document.getElementsByClassName("start")[0];
var num = document.getElementsByClassName("num")[0];
num.innerHTML = `你已经录入${localStorage.length}组词汇`
btn.onclick = function(){
localStorage.setItem(cn.value,en.value);
document.getElementsByName("en")[0].value = '';
document.getElementsByName("cn")[0].value = '';
//num为已经存入localStorage 的数据长度
for(var i = 0 ; i<=localStorage.length;i++){
num.innerHTML = `你已经录入${i}组词汇`
}
}
start.onclick = function(){
confirm('确定现在开始测验？');
location.href = 'test.html';
}单词测试页面实现
第二个页面的JavaScript代码实现如下。
var test = document.getElementById("test");
var arr = new Array();
var start = document.getElementsByClassName("start")[0];
//遍历localStorage对象 将key和value取出来存放到新的arr数组
for(var i = 0; i < localStorage.length; i++) {
var getKey = localStorage.key(i);
var getVal = localStorage.getItem(getKey);
arr[i] = {
'key': getKey,
'val': getVal,
}
}
var btn = document.getElementsByClassName("btn")[0];
//初始化总题数，正确数量，错误数量
var all = arr.length;
var right = 0;
var wrong = 0;
sessionStorage.setItem('题库',all);
btn.onclick = function(){
//判断数组中存在数据
if (arr.length) {
//在数组中随机取一道题显示在页面上
let index = Math.floor(Math.random()*arr.length);
test.innerHTML=`<span>${arr[index].key}:</span><input type="text" name="cn" autocomplete="off"><br>`;
var cn = document.getElementsByName("cn")[0];
//input失焦后对value值和存好的数据进行比对
cn.onblur = function(){
if (cn.value == arr[index].val) {
right++;
}else{
wrong++;
}
//储存正确和错误数量
sessionStorage.setItem('right',right);
sessionStorage.setItem('wrong',wrong);
//防止后续出现这个题在数组中删除它
arr.splice(index,1);
}
}else{
test.innerHTML = `<span>这已经是最后一题了</span>`
}
}
start.onclick = function(){
confirm('确定提交答案？');
location.href = 'result.html'
}结果统计页面实现
第三个页面的JavaScript代码实现如下。
var all = document.getElementById("all");
var right = document.getElementById("right");
var wrong = document.getElementById("wrong");
all.innerHTML = sessionStorage.题库;
right.innerHTML = sessionStorage.right;
wrong.innerHTML = sessionStorage.wrong;
var start = document.getElementsByClassName("start")[0];
var again = document.getElementsByClassName("again")[0];
start.onclick = function(){
location.href = "save.html";
}
again.onclick = function(){
location.href = "test.html"
}下图展示了Web Storage在浏览器中的存储情况，这是本例的重点。
核心逻辑在于将数据存入localStorage，随后遍历该对象，将键值对提取并存储到数组中，以便后续使用。界面2的功能是将数组内容按随机顺序展示在页面上，当input框失去焦点时，系统会判断答案的正确性并分别保存正确和错误的答案（注意：必须在输入框失去焦点时判断，而非点击“下一个”时，因为此时input框对应的数据内容可能已改变），从而统计最终的正确与错误数量。其他细节已在代码注释中说明。
以上就是本文的全部内容，希望对读者有所帮助，欢迎继续支持本站。