标签：存储 单词 getElementById var document border
客户端浏览器存储做单词记忆测试
服务器与存储的关系
服务器可以是: 服务器主机+服务器存储(硬盘) 这时服务器跟存储是一体的。
另外,就是单独作为服务器的主机 ,服务器上的硬盘一般仅用来安全操系统,服务器就是服务器。
存储就是独立出来的设备 ,一般会以磁盘阵列、磁带库、小型环境的共享存储器等等 。
今天要讲的这测试 是客户端存储：
利用浏览器存储数据并且调用数据。
分类
之前最常用的存储：
cookie存储：通过发送请求，服务端返回一个cookieID存在浏览器缓存中，大小在4kb左右。这种存储方式占用了带宽 也就是拖了网速。优点是浏览器通用。需要注意的是在ie6中，限制了每个域名只能有20个cookies。
讲到了ie 就不得不提userData 它是ie的59专用特性，flash的本地存储，空间是cookie的25倍！但是它被淘汰了。
ie有那谷歌Google自然也不会少了，Google的Gears存储大小没有任何限制，这就是一个非常强大的功能了吧，同时别的浏览器也能用！！可惜的是，别的浏览器使用的时候需要额外安装插件。就这一条，就注定了它不能被推崇开来。
还有IndexDB技术，客户端直接存储对象，目前还不是HTML的标准，它的大小也没有任何限制。
HTML5还有webstroage技术，使用简单，大小不能超过8mb，这已经很大了。
sessionStroage与localStorage
sessionStroage是会话级别的存储，存在当前会话中，会话结束时数据消失。
localStorage是跨会话存储，浏览器关闭后数据依然存在。今天我用这两种存储方式搭配使用写一个单词在线录入与测试的小游戏。
思路
先写一个单词可以重复录入的页面，两条输入框，一个存储中文，一个存储英文。 录入成功时，清空输入框，可以继续录入新单词。随时可以开始测试。
测试界面 动态获取存储到的所有单词 只显示中文，并且中文后面跟上输入框，供测试者
输入与中文对应的英文。结束测试时进入成绩页面。
显示总题数，错题数和答对的题数。
上手吧
单词录入页
<style type="text/css">
#box{
width: 300px;
height: 200px;
border: 4px solid greenyellow;
border-radius:12px ;
margin: auto;
/*font-size: 20px;*/
text-align: center;
background-color: rgba(187,220,252,.4);
}
a{
text-decoration: none;
color: deepskyblue;
}
#btnsubmit{
display: block;
border: none;
border-radius:3px ;
color: #fff;
width: 60px;
height: 30px;
margin: 15px auto -10px;
}
h3{
text-align: center;
}
</style>
</head>
<body>
<div id="box">
<h3>单词录入</h3>
英文：<input type="text" id="eng"/>
<br />
中文：<input type="text" id="chi"/>
<br />
<button onclick="fun()" id="btnsubmit">保存</button>
<br />
<a href="test.html">开始测试</a>
</div>
<script>
function fun() {
var eng = document.getElementById('eng').value;
var chi = document.getElementById('chi').value;
if(document.getElementById('eng').value==""||document.getElementById('chi').value==""){
alert("不能传入空值");
}else{
localStorage[chi]=eng;
document.getElementById('eng').value="";
document.getElementById('chi').value="";
}
//localStorage["chinese"]=chi;
}
</script>
</body>
单词测试页
<style type="text/css">
#box{
width: 300px;
/*height: 200px;*/
border: 4px solid greenyellow;
border-radius:12px ;
margin: auto;
/*font-size: 20px;*/
text-align: center;
background-color: rgba(187,220,252,.4);
}
#btnsubmit{
display: block;
border: none;
border-radius:3px ;
color: #fff;
width: 60px;
height: 30px;
margin: 5px auto;
}
h3{
text-align: center;
}
</style>
</head>
<body>
<div id="box">
<h3>测试</h3>
<div id="main">
</div>
<input type="submit" id="btnsubmit" value="提交" />
</div>
<script>
if(sessionStorage.key!=null){
console.log(111);
sessionStorage.clear();
}
var main1=document.getElementById("main");
for(var i=0; i<localStorage.length; i++){
var key = localStorage.key(i) //获取第i个key
//var value = localStorage[key]; //获取第i个value
main1.innerHTML+=`<span class="zhi"></span><input type="text"/ value=""><br/>`;
var zhi1=document.getElementsByClassName("zhi")[i];
zhi1.innerHTML=key+"：";
}
var iputs = document.getElementsByTagName("input");
//var conts=0;
var btnsubmit = document.getElementById("btnsubmit");
btnsubmit.onclick = function(){
var conts=0;
for(var i=0; i<localStorage.length; i++){
var key = localStorage.key(i);
//var values = localStorage[key];
if(iputs[i].value!=localStorage[key]){
conts++;
}
}
console.log(conts);
sessionStorage[key] = conts;
location.href="result.html";
}
</script>
成绩页
<style type="text/css">
#box{
width: 300px;
height: 200px;
border: 4px solid greenyellow;
border-radius:12px ;
margin: auto;
/*font-size: 20px;*/
text-align: center;
background-color: rgba(187,220,252,.4);
}
a{
text-decoration: none;
color: deepskyblue;
}
h3{
text-align: center;
}
</style>
</head>
<body>
<div id="box">
<h3>测试结果</h3>
总单词数：<span id="allwords"></span>
<br />
正确数量：<span id="truewords"></span>
<br />
错误数量：<span id="flasewords"></span>
<br />
<a href="save.html">继续录入新单词</a>
<br />
<a href="test.html">再次测试</a>
</div>
<script>
var allwords=document.getElementById("allwords");
var flasewords=document.getElementById("flasewords");
var truewords=document.getElementById("truewords");
var all=parseInt(localStorage.length);
allwords.innerHTML=all;
var key=sessionStorage.key(0);
var flases=parseInt(sessionStorage[key]);
flasewords.innerHTML=flases;
var trues=all-flases;
truewords.innerHTML=trues;
// console.log(all)
</script>
测试完后 还可以继续录入单词 再次测试
半步浮生
发布了27 篇原创文章 · 获赞 3 · 访问量 389
私信
关注
标签：存储,单词,getElementById,var,document,border 来源： https://blog.csdn.net/qq_36245314/article/details/103978691
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。