<!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 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.打字速度太慢。