标签：element 表格 需求分析 doctype dex var 记录 分析 文本
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>
标签：element 表格 需求分析 doctype dex var 记录 分析 文本
原文地址：http://www.cnblogs.com/w190/p/7376146.html
