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. python设计模式之单例

    """ 单例模式 1.第一种方法 修改__new__方法 2.第二种方法 python import 就是一个单例模式 把要单例的类封装到一个py文件中 "&q ...

  2. MySql常用命令集Mysql常用命令3

    MYSQL常用命令 有很多朋友虽然安装好了mysql但却不知如何使用它.在这篇文章中我们就从连接 MYSQL.修改密码.增加用户等方面来学习一些MYSQL的常用命令. 有很多朋友虽然安装好了mysql ...

  3. 20145203盖泽双 《网络对抗技术》实践九：Web安全基础实践

    20145203盖泽双 <网络对抗技术>实践九:Web安全基础实践 1.实践目标 1.理解常用网络攻击技术的基本原理. 2.Webgoat下进行相关实验:SQL注入攻击.XSS攻击.CSR ...

  4. 转载 线程初步了解 - <第一篇>

    操作系统通过线程对程序的执行进行管理,当操作系统运行一个程序的时候,首先,操作系统将为这个准备运行的程序分配一个进程,以管理这个程序所需要的各种资源.在这些资源之中,会包含一个称为主线程的线程数据结构 ...

  5. js == 与 === 的区别[转]

    we文章转自http://blog.sina.com.cn/s/blog_4b32835b01014iv9.html 1.对于string,number等基础类型,==和===是有区别的 1)不同类型 ...

  6. WordPress研究心得

    WordPress,当初之所以研究这个,目的是在于开发一个多租户系统应用.总的来说,WordPress给了我不少启发和影响.为此,我决定这个研究心得分享出去. 总的来说,这篇文章参考了很多朋友们的博客 ...

  7. 原生js函数的伪重载

    一.我们在学习java的时候,其中方法有一个比较的重要的特性重载,根据传入的参数的个数来执行不同的方法,而方法其根据签名来判断,而JavaScript却不能根据方法的签名来进行重载,只能通过参数的个数 ...

  8. AliOS-Things linkkitapp解读

    app-example-linkkitapp是AliOS-Things提供的设备联网并且和阿里云IOT平台数据交互的一个示例程序: 1:application_start()程序在app_entry. ...

  9. 如何使用 GroupBy 计数-Count()

    十年河东,十年河西,莫欺少年穷. 本节探讨的内容很简单,就是如果使用GroupBy计数 提供两种方法:第一:把查询的数据,转化为泛型,然后泛型分组计数. 第二:Linq语句直接分组计数 有如下范例: ...

  10. C# LINQ 详解 From Where Select Group Into OrderBy Let Join

    目录 1. 概述 2. from子句 3. where子句 4. select子句 5. group子句 6. into子句 7. 排序子句 8. let子句 9. join子句 10. 小结 1. ...