1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="UTF-8">
5 <title></title>
6 <style>
7 #div1{
8 width: 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 }
