1.  <!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的更多相关文章

  1. JavaScript进阶之路（一）初学者的开始

    一:写在前面的问题和话 一个javascript初学者的进阶之路! 背景:3年后端(ASP.NET)工作经验,javascript水平一般般,前端水平一般般.学习资料:犀牛书. 如有误导,或者错误的地 ...

  2. AngularJs学习笔记（制作留言板）

    原文地址:http://www.jmingzi.cn/?post=13 初学Anjularjs两天了,一边学一边写的留言板,只有一级回复嵌套.演示地址 这里总结一下学习的过程和笔记.另外,看看这篇文章 ...

  3. laravel数据库迁移(三)

    laravel号称世界上最好的框架,数据库迁移算上一个,在这里先简单入个门: laravel很强大,它把表中的操作写成了migrations迁移文件,然后可以直接通过迁移文件来操作表.所以 , 数据迁 ...

  4. tp框架之留言板练习

    登陆控制器与显示页面 <?php namespace Admin\Controller; use Think\Controller; class DengController extends C ...

  5. 从零开始编写属于我的CMS：（六）插件

    二三四五还没写,先写六吧(有道友说想看看插件部分). 这里是一 从零开始编写属于我的CMS:(一)前言 一,首先预定义接口 新建类库,WangCms.PluginInterface 新建两个类,一个实 ...

  6. 11月8日PHP练习《留言板》

    一.要求 二.示例页面 三.网页代码及网页显示 1.denglu.php  登录页面 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Tran ...

  7. R语言 ETL+统计+可视化

    这篇文章...还是看文章吧 导入QQ群信息,进行ETL,将其规范化 计算哪些QQ发言较多 计算一天中哪些时段发言较多 计算统计内所有天的日发言量 setwd("C:/Users/liyi/D ...

  8. thinkphp留言板例子（多条件查询）

    登录: login.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "htt ...

  9. 2 . Linux常见命令

    Linux常见命令格式: 命令名称 选项 参数 ls -alh 文件/目录 --all #ls 显示当前目录内容 #ls -l 显示文件详细信息 #ls -hl h已常见单位显示文件大小 k M G# ...

随机推荐

  1. D - C Looooops POJ - 2115 欧几里德拓展

    题意:就是看看for(; ;)多久停止. 最让我蛋疼的是1L和1LL的区别!让我足足wa了12发! 1L 是long类型的, 1LL为long long类型的! 思路: 这就是欧几里德扩展的标准式子了 ...

  2. （2）HomeAssistant 参数配置

    如果你希望使用其它目录作为配置文件所在地,可以使用以下命令启动home assistant:hass --config path/to/config 在配置目录下,有一个文件configuration ...

  3. 转载 SpringMVC详解（二）------详细架构

    目录 1.SpringMVC 详细介绍 2.SpringMVC 处理请求流程 3.配置前端控制器 4.配置处理器适配器 5.编写 Handler 5.配置处理器映射器 6.配置视图解析器 7.Disp ...

  4. .net Parallel并行使用注意事项

    因项目响应过慢,代码优化空间不大,在暂时无法调整系统架构的情况下,只有使用.NET中的TPL解决一些模块耗时过多的问题.但在使用过程中也碰到了一些问题,现在把它写下来,用于备忘. 1. Paralle ...

  5. ORA-245: In RAC environment from 11.2 onwards Backup Or Snapshot controlfile needs to be in shared location (Doc ID 1472171.1)

    巡检时遇到错误如下: alert日志: Wed Dec 19 01:00:29 2018Errors in file /oracle/base/diag/rdbms/usap/usap1/trace/ ...

  6. 查询rman 备份信息集

    SELECT TRIM(START_TIME||'#'),       TRIM(END_TIME||'#'),       TRIM(CASE OUTPUT_DEVICE_TYPE         ...

  7. 说说CDN

    本文今天主要讲解三个方面: 第一.没有CDN之前采取的常用策略是什么; 第二.CND的概念; 第三.CDN的优点和缺点(凡是有利也有弊,任何东西都是相对的); 一.没有CDN之前采取的常用策略是什么 ...

  8. 谈谈maven多模块

    记得在校的时候,通常用的比较多是动态web工程,动态web工程导入最多就是jar包,这些jar包需要自己手动复制粘贴放入lib目录下,然后build path,有的IDE会自动build path有的 ...

  9. http协议以及get和post请求

    HTTP协议是网络传输信息的一种规范. 就好比两个人之间的交流,甲只会讲英语,乙只会说汉语,结果是他们必然无法开怀畅谈. HTTP协议也类   GET 请求获取 Request-URI 所标识的资源 ...

  10. AI 卷积神经网络

    卷积神经网络(Convolutional Neural Network,简称CNN),顾名思义,使用了卷积.不过,这里用到的卷积和数学中的不完全一致. 1.连续卷积 2.离散卷积 3.二维离散卷积 4 ...