记事本案例（用时两小时）

最新推荐文章于 2024-10-29 13:35:14 发布

cccopy6

最新推荐文章于 2024-10-29 13:35:14 发布

阅读量618

点赞数 2

CC 4.0 BY-SA版权

分类专栏：自学文章标签：前端自学

本文链接：https://blog.youkuaiyun.com/cccopy6/article/details/79548879

自学专栏收录该内容

1 篇文章

订阅专栏

本文介绍了一个使用Web存储功能实现的记事本案例，重点探讨了localStorage和sessionStorage的应用，包括如何设置、获取、删除数据及清空所有数据。在学习过程中，作者发现了sessionStorage拼写易错、字符串拼接错误、代码风格问题和打字速度慢等挑战，强调了加强练习和改进代码习惯的重要性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>记事本案例</title>
</head>
<body>
<textarea id="note"></textarea>
<br>
<input type="button" id="add" value="新增">
<input type="button" id="save" value="保存">
<input type="button" id="read" value="读取">
<input type="button" id="update" value="修改">
<input type="button" id="dele" value="删除">
<input type="button" id="clear" value="清空">
<div id="show">
</div>
<input type="hidden" id="mykey">
<script>
/*
需求分析：
新增：清空textarea里面的内容
保存：保存输入内容
读取：读取所保存的所有内容（显示在页面中，第一列为单选框）
修改：修改指定内容（必须进行选取）
删除：删除所选内容（必须进行选取）
清空：清空所有保存数据内容
*/
//获取所有按钮
var add =document.getElementById('add');
var save =document.getElementById('save');
var read =document.getElementById('read');
var update =document.getElementById('update');
var dele =document.getElementById('dele');
var clear =document.getElementById('clear');
          var note =document.getElementById('note');
        var mykey =document.getElementById('mykey');
//新增内容
add.onclick=function(){
note.value="";
}
//保存
save.onclick=function(){
var value =note.value;
var key =mykey.value;
if(!key){
    var key =new Date().getTime();
}
    sessionStorage.setItem(key,value);
          }
//读取
read.onclick= readDatas;
function readDatas(){
var show =document.getElementById('show');
var myhtml="<table border='1'><tbody><tr><td></td><td>key</td><td>value</td></tr>"
var sum =sessionStorage.length;
for(var i=0;i<sum;i++){
var key =sessionStorage.key(i);
var value =sessionStorage.getItem(key);
myhtml +="<tr><td><input type='radio' name='mydatas' value='"+i+"'/></td><td>"+key+"</td><td>"+value+"</td></tr>";
}
myhtml +="</tbody></table>";
show.innerHTML=myhtml;
}
//修改
update.onclick=function(){
var radios =document.getElementsByName('mydatas');
for(var i=0;i<radios.length;i++){
var radio=radios[i];
if(radio.checked){
var index =radio.value;
var key =sessionStorage.key(index);
     var value=sessionStorage.getItem(key);
     note.value=value;
     mykey.value=key;
}
}
}
// 删除
dele.onclick=function(){
var radios =document.getElementsByName('mydatas');
for(var i=0;i<radios.length;i++){
var radio=radios[i];
if(radio.checked){
var index =radio.value;
var key =sessionStorage.key(i);
sessionStorage.removeItem(key);
break;
}
}readDatas();
}
//清空
clear.onclick=function(){
sessionStorage.clear();
}
</script>
</body>

</html>