-
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 <style> 7 #div1{ 8 400px; 9 height: 200px; 10 overflow:auto; 11 border: #000000 1px solid; 12 } 13 </style> 14 </head> 15 <body> 16 <div id="div1"> 17 <ul id="ul1"></ul> 18 </div> 19 <input type="text" id="input1" /> 20 <input type="button" id="btn" value="留言" /> 21 <script type="text/javascript" src="cookie.js" ></script> 22 <script> 23 btn.onclick = function(){ 24 // 输入框的内容 25 var str = input1.value; 26 input1.value = ""; 27 // 防止xss攻击 28 str = str.replace(/</g,'<'); // /</ 表示正则对象，g表示全局匹配 29 str = str.replace(/>/g,'>'); // 语义为，在当前的str中，全局查找>，替换成> 30 // 创建li，显示在ul中 31 var li = document.createElement("li"); 32 ul1.appendChild(li); 33 li.innerHTML = str; 34 //li.innerText = str; 35 // 用cookie将str数据存储起来 36 // 先把原始数据取出来 37 // 第一次获取data这个cookie时，r拿到的时undefined 38 var r = getCookie("data"); // r='[str1, str2....]' 39 var arr; 40 if( r ){ // 如果存在原始数据的话，把原始数字这个字符串，转换为数组对象 41 arr = JSON.parse(r); // arr = JSON.parse('[str1, str2....]') 42 }else{ // 如果不存在原始数据时，即第一次添加数据，所以arr是空数组 43 arr = []; 44 } 45 arr.push(str); // 把当前输入框中的值，追加存储到数组中 46 // 把数组，转换为字符串后，保存到cookie中 47 var jsonstr = JSON.stringify(arr); 48 setCookie("data", jsonstr, 7); 49 } 50 51 // 打开页面时，把data，显示到ul中 52 var r = getCookie("data"); 53 if( r ){ // 如果存在数据 54 // 把字符串转换为数组 55 var arr = JSON.parse(r); 56 // 循环 57 for( var i=0,len=arr.length; i<len; i++ ){ 58 var li = document.createElement("li"); 59 ul1.appendChild(li); 60 li.innerHTML = arr[i]; 61 } 62 }else{ 63 // 如果不存在数据 64 } 65 66 67 </script> 68 </body> 69 </html>
1 function setCookie( cookieName, cookieValue, d, path ){ 2 var str = cookieName+"="+ encodeURIComponent(cookieValue);//编码 3 if( d ){ // 如果设置了过期时间 4 var dt = new Date(); 5 dt.setDate( dt.getDate()+d ); 6 str += ";expires="+dt.toGMTString(); 7 } 8 if( path ){ // 如果设置了path属性 9 str += ";path="+path; 10 } 11 document.cookie = str; 12 } 13 function getCookie( cookieName ){ 14 var str = decodeURIComponent(document.cookie);//解码 15 var arr = str.split("; "); // 注意根据分号和空格拆分 16 for( var i=0,len=arr.length; i<len; i++ ){ 17 var c = arr[i].split("="); 18 if( c[0]==cookieName ){ 19 // return c[1];// 前提是，所设置的cookie内容中没有等号 20 // 如果cookie中存在等号的话，截取的是第一个等号后面的所有数据 21 return arr[i].substr(cookieName.length+1) 22 } 23 } 24 }