liuyan

 <!DOCTYPE html>

 <html>

 <head>

 <meta charset="UTF-8">

 <title></title>

 <style>

 #div1{

     width: 400px;

     height: 200px;

     overflow:auto;

     border: #000000 1px solid;

 }

 </style>

 </head>

 <body>

 <div id="div1">

     <ul id="ul1"></ul>

 </div>

 <input type="text" id="input1" />

 <input type="button" id="btn" value="留言" />

 <script type="text/javascript" src="cookie.js" ></script>

 <script>

 btn.onclick = function(){

     // 输入框的内容

     var str = input1.value;

     input1.value = "";

     // 防止xss攻击

     str = str.replace(/</g,'&lt;'); // /</ 表示正则对象，g表示全局匹配

     str = str.replace(/>/g,'&gt;'); // 语义为，在当前的str中，全局查找>，替换成&gt;

     // 创建li，显示在ul中

     var li = document.createElement("li");

     ul1.appendChild(li);

     li.innerHTML = str;

     //li.innerText = str;

     // 用cookie将str数据存储起来

     // 先把原始数据取出来

     // 第一次获取data这个cookie时，r拿到的时undefined

     var r = getCookie("data");    // r='[str1, str2....]'

     var arr;

     if( r ){ // 如果存在原始数据的话，把原始数字这个字符串，转换为数组对象

         arr = JSON.parse(r);     // arr = JSON.parse('[str1, str2....]')

     }else{    // 如果不存在原始数据时，即第一次添加数据，所以arr是空数组

         arr = [];

     }

     arr.push(str);    // 把当前输入框中的值，追加存储到数组中

     // 把数组，转换为字符串后，保存到cookie中

     var jsonstr = JSON.stringify(arr);

     setCookie("data", jsonstr, 7);

 }

 // 打开页面时，把data，显示到ul中

 var r = getCookie("data");

 if( r ){ // 如果存在数据

     // 把字符串转换为数组

     var arr = JSON.parse(r);

     // 循环

     for( var i=0,len=arr.length; i<len; i++ ){

         var li = document.createElement("li");

         ul1.appendChild(li);

         li.innerHTML = arr[i];

     }

 }else{

     // 如果不存在数据

 }

 </script>

 </body>

 </html>

 function setCookie( cookieName, cookieValue, d, path ){

     var str = cookieName+"="+ encodeURIComponent(cookieValue);//编码

     if( d ){ // 如果设置了过期时间

         var dt = new Date();

         dt.setDate( dt.getDate()+d );

         str += ";expires="+dt.toGMTString();

     }

     if( path ){ // 如果设置了path属性

         str += ";path="+path;

     }

     document.cookie = str;

 }

 function getCookie( cookieName ){

     var str = decodeURIComponent(document.cookie);//解码

     var arr = str.split("; ");    // 注意根据分号和空格拆分

     for( var i=0,len=arr.length; i<len; i++ ){

         var c = arr[i].split("=");

         if( c[0]==cookieName ){

             // return c[1];// 前提是，所设置的cookie内容中没有等号

             // 如果cookie中存在等号的话，截取的是第一个等号后面的所有数据

             return arr[i].substr(cookieName.length+1)

         }

     }

 }

巴特西

liuyan

最新文章

热门文章