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. PHP数组转为树的算法

    一.使用引用 function listToTree($list, $pk = 'id', $pid = 'pid', $child = '_child', $root = 0) { $tree = ...

  2. 马哥Python视频

    链接:https://pan.baidu.com/s/1KMXqdXlaIjZ3OaZ-PUwE9A 密码私聊我

  3. B-Tree外存数据结构 _（B 树）第二部分

    2. B 树 B 树是为了磁盘或其它存储设备而设计的一种多叉(相对于二叉,B树每个内结点有多个分支,即多叉)平衡查找树 一棵B树,一棵关键字为英语中辅音字母的B树,现在要从树中查找字母R(包含n[x] ...

  4. STM32固件库详解

    STM32固件库详解   emouse原创文章,转载请注明出处http://www.cnblogs.com/emouse/ 应部分网友要求,最新加入固件库以及开发环境使用入门视频教程,同时提供例程模板 ...

  5. C#位运算实际运用

    前言 前几天写了一篇关于c#位操作,c#位运算基本概念与计算过程 最后提到一个实际问题 需求:C# 用两个short,一个int32拼成一个long型 要求:现在有两个short和一个int,需要拼成 ...

  6. BP浅谈

    之前一直对BP的理解不透彻,这可不行,这个可是超经典的广泛应用在ML中的求偏导的方法.本博来自<神经网络与机器学习>P86页. 在用到bp的地方我们都是为了使用梯度下降法,并求出他的偏导数 ...

  7. OpenGL初学:安装配置与第一个程序

    OpenGL初学:安装配置与第一个程序 2014年10月12日 12:37:03 process-z 阅读数:12413 标签: opengl安装教程 更多 个人分类: OpenGL   计算机图形学 ...

  8. IDC Digital Transition Annual Festival（2018.10.19）

    时间:2018.10.19地点:北京万达文化酒店

  9. Ionic下的Jpush消息推送与内容显示

    本文测试Jpush将消息推送给手机端,手机端点击通知栏,即可看到具体的推送内容. 1.极光推送消息设置 设置附加字段: 点击发送,手机端收到消息通知. 2.手机接收到的消息通知 点击之后进入具体的页面 ...

  10. 【php增删改查实例】第十八节 - login.php编写

    1.对用户名和密码进行非空判断(后台验证) $username; $password; if(isset($_POST['username']) && $_POST['username ...