记事本案例(用时两小时)

本文介绍了一个使用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>


这是一个记事本案例,主要运用的是Web的存储功能和API

核心就是localStorage和sessionStorage两个事件

sessionStorage

setItem(key,value)设置和新增数据。同时存在需要if判断

getItem(key),获取数据,返回的是value

key(index),根据索引值返回key值

removeItem(key)删除

clear()清除所有

学期间所出的问题:

1.sessionSTorage这个单词太长了,容易打错。需要背下来

2."<table border='1'><tbody><tr><td></td><td>key</td><td>value</td></tr>"

此类字符串拼接,本来以为很简单,其实最容易出错,下次注意。

3.有些书写不规范末尾没有分号,缩进有进步,有许多空白行,需要改一下自己的代码习惯

3.依旧是单词错误,还是有一些小毛病,看来还是要多练习

4.打字速度太慢。



评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值