H5-Web存储API使用 

 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>

 

posted @ 2017-08-16 21:46  青涩的柠檬酸  阅读(442)  评论(0)    收藏  举报