1 <!DOCTYPE html>
2 <html>
3 <head>
4 <title>sessionStorage实现记事本功能</title>
5 <meta charset="utf-8" />
6 </head>
7
8 <body>
9 <input type="text" id="note"><br>
10 <input type="button" id="save" value="保存">
11 <input type="button" id="read" value="读取">
12 <input type="button" id="del" value="删除">
13 <script>
14 // 当用户在文本框中输入内容,点击"保存"按钮,进行保存(sessionStorage)
15 // 1. 获取button按钮
16 var save = document.getElementById("save");
17 // 2. 为button按钮绑定click事件
18 save.onclick = function(){
19 // 3. 获取用户输入的内容
20 var data = document.getElementById("note").value;
21 // * 存储数据使用key是唯一,不可重复
22 var key = new Date().getTime();
23 // 4. 利用sessionStorage进行存储
24 window.sessionStorage.setItem(key,data);
25 }
26 // 用户点击"读取"按钮,将所有数据进行读取
27 var read = document.getElementById("read");
28 read.onclick = function(){
29 // 获取当前sessionStorage存储系统的所有数据个数
30 var sum = sessionStorage.length;
31 // 遍历所有数据
32 for(var i=0;i<sum;i++){
33 // i是索引值 - 得到key(key(index))
34 var key = sessionStorage.key(i);
35 // 根据key得到对应的value
36 var value = sessionStorage.getItem(key);
37
38 console.log(value);
39 }
40 }
41 // 用户点击"删除"按钮,删除所有数据
42 var del = document.getElementById("del");
43 del.onclick = function(){
44 /*
45 var sum = sessionStorage.length;
46 // 当删除第一个数据,第二个数据的索引值-1
47 for(var i=sum-1;i>=0;i--){
48 var key = sessionStorage.key(i);
49 sessionStorage.removeItem(key);
50 }*/
51 sessionStorage.clear();
52 }
53 </script>
54 </body>
55 </html>
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <title>记事本案例</title>
5 <meta charset="utf-8" />
6 </head>
7
8 <body>
9 <textarea id="note"></textarea><br>
10 <input type="button" id="add" value="新增">
11 <input type="button" id="save" value="保存">
12 <input type="button" id="read" value="读取">
13 <input type="button" id="update" value="修改">
14 <input type="button" id="dele" value="删除">
15 <input type="button" id="clear" value="清空">
16 <br><br>
17 <div id="show"></div>
18 <!-- 隐藏域-用户看不到 -->
19 <input type="hidden" id="mykey">
20 <script>
21 /*
22 * 需求分析
23 * * 新增 - 清空textarea元素中的所有内容
24 * * 保存 - 保存用户输入的内容
25 * * 读取 - 读取保存的所有数据内容
26 * * 显示在页面中(表格-第一列为单选框)
27 * * 修改 - 修改指定数据内容
28 * * 必须选择其中一条数据
29 * * 删除 - 删除指定数据内容
30 * * 必须选择其中一条数据
31 * * 清空 - 将保存的所有数据删除
32 */
33 // 1. 获取页面中所有按钮
34 var add = document.getElementById("add");
35 var save = document.getElementById("save");
36 var read = document.getElementById("read");
37 var update = document.getElementById("update");
38 var dele = document.getElementById("dele");
39 var clear = document.getElementById("clear");
40
41 var note = document.getElementById("note");
42
43 var mykey = document.getElementById("mykey");
44 // 2. 为所有按钮绑定click事件
45 // 新增
46 add.onclick = function(){
47 note.value = "";
48 alert("新建一个记事本.");
49 }
50 // 保存
51 save.onclick = function(){
52 // 1. 获取用户输入内容
53 var value = note.value;
54 // 获取hidden元素的value属性值
55 var key = mykey.value;
56 // 判断是新增还是修改
57 if(!key){// 新增
58 // 2. 创建key - 唯一
59 key = new Date().getTime();
60 }
61 // 3. 保存数据内容
62 sessionStorage.setItem(key,value);
63 alert("已经保存成功.");
64 }
65 // 读取 - 所有数据
66 read.onclick = readDatas;
67 function readDatas(){
68 // 获取div元素
69 var show = document.getElementById("show");
70 // 利用string拼完整的HTML代码
71 var myhtml = "<table border=‘1‘><tbody><tr><td></td><td>key</td><td>value</td></tr>";
72 // 1. 获取所有数据的个数
73 var sum = sessionStorage.length;
74 // 2. 遍历所有数据
75 for(var i=0;i<sum;i++){
76 // 3. 根据索引值得到key
77 var key = sessionStorage.key(i);
78 // 4. 根据key得到value
79 var value = sessionStorage.getItem(key);
80
81 myhtml += "<tr><td><input type=‘radio‘ name=‘mydatas‘ value=‘"+i+"‘></td><td>"+key+"</td><td>"+value+"</td></tr>";
82 }
83 myhtml += "</tbody></table>";
84 // 将完整的HTML代码插入在div中
85 show.innerHTML = myhtml;
86 }
87 // 修改
88 update.onclick = function(){
89 // 1. 获取用户选择那条记录
90 var radios = document.getElementsByName("mydatas");
91 for(var i=0;i<radios.length;i++){
92 var radio = radios[i];
93 if(radio.checked){
94 // 获取当前单选框的value属性值(索引值)
95 var index = radio.value;
96 // 2. 将对应的key和value值得到
97 var key = sessionStorage.key(index);
98 var value = sessionStorage.getItem(key);
99 // 3. 将得到的value值,写入到textarea中
100 note.value = value;
101 // 4. 将读取的key值,写入到hidden元素的value属性值
102 mykey.value = key;
103 }
104 }
105 }
106 // 删除
107 dele.onclick = function(){
108 var radios = document.getElementsByName("mydatas");
109 for(var i=0;i<radios.length;i++){
110 var radio = radios[i];
111 if(radio.checked){
112 var index = radio.value;
113 var key = sessionStorage.key(i);
114 sessionStorage.removeItem(key);
115 break;
116 }
117 }
118 // 重新执行查询操作
119 readDatas();
120 alert("该条记录成功删除.");
121 }
122 // 清空
123 clear.onclick = function(){
124 sessionStorage.clear();
125 alert("数据已清空.");
126 }
127 </script>
128 </body>
129 </html>
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <title>localStorage的特点</title>
5 <meta charset="utf-8" />
6 </head>
7
8 <body>
9 <input type="text" id="note"><br>
10 <input type="button" id="save" value="保存">
11 <input type="button" id="read" value="读取">
12 <input type="button" id="del" value="删除">
13 <script>
14 // 当用户在文本框中输入内容,点击"保存"按钮,进行保存(sessionStorage)
15 // 1. 获取button按钮
16 var save = document.getElementById("save");
17 // 2. 为button按钮绑定click事件
18 save.onclick = function(){
19 // 3. 获取用户输入的内容
20 var data = document.getElementById("note").value;
21 // * 存储数据使用key是唯一,不可重复
22 var key = new Date().getTime();
23 // 4. 利用localStorage进行存储
24 window.localStorage.setItem(key,data);
25 }
26 // 用户点击"读取"按钮,将所有数据进行读取
27 var read = document.getElementById("read");
28 read.onclick = function(){
29 // 获取当前localStorage存储系统的所有数据个数
30 var sum = localStorage.length;
31 // 遍历所有数据
32 for(var i=0;i<sum;i++){
33 // i是索引值 - 得到key(key(index))
34 var key = localStorage.key(i);
35 // 根据key得到对应的value
36 var value = localStorage.getItem(key);
37
38 console.log(value);
39 }
40 }
41 // 用户点击"删除"按钮,删除所有数据
42 var del = document.getElementById("del");
43 del.onclick = function(){
44 localStorage.clear();
45 }
46 </script>
47 </body>
48 </html>
时间： 2024-10-07 23:10:51