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. luogu P4718 【模板】Pollard-Rho算法（贴代码）

    嘟嘟嘟 从标题中能看出来,我只是想贴一个代码. 先扯一会儿. 前几天模拟考到了这东西,今天有空就学了一下. 到网上找资料,发现前置技能是miller-rabin筛法,于是我还得先学这么个东西. 学mi ...

  2. 【转】避免全表扫描的sql优化

    对查询进行优化,应尽量避免全表扫描,首先应考虑在where 及order by 涉及的列上建立索引: .尝试下面的技巧以避免优化器错选了表扫描:· 使用ANALYZE TABLE tbl_name为扫 ...

  3. Python调用WIN10语音交互+识别+控制+自定义对话

    1 安装库文件 2修改两个地方 最简单的 # 将输入文字转化为语音信号输出 import speech while True: speech.say("请输入:") str = i ...

  4. Qt 编程指南 1 从Hello World开始

    1 简单的hello QT 注意项目和路径不要包含任何中文字符,特殊字符,空格. 只能有英文,数字,下划线,且不能数字开头. //helloqt.cpp #include <QtWidgets/ ...

  5. Centos6.8配置HTTPS

    HTTPS服务http+openssl 环境要求:CA证书: 192.168.1.103网站服务器: 192.168.1.104客户端: 192.168.1.107 (linux图形化界面) 内核:( ...

  6. Redis详解（七）------ AOF 持久化

    上一篇文章我们介绍了Redis的RDB持久化,RDB 持久化存在一个缺点是一定时间内做一次备份,如果redis意外down掉的话,就会丢失最后一次快照后的所有修改(数据有丢失).对于数据完整性要求很严 ...

  7. Redis缓存的使用

    首先需要去Redis官网下载Redis的安装包 要在eclipse中使用Redis还需要两个jar包,需要的自行查找或者联系我 运行Redis需要开启Redis的服务端,也就是下载的安装包中的“red ...

  8. Hive 实现 wordcount

    创建表: create table hive_wordcount(context string); load data local inpath '/home/hadoop/files/hellowo ...

  9. [转]zookeeper-端口说明

    一.zookeeper有三个端口(可以修改) 1.2181 2.3888 3.2888 二.3个端口的作用 1.2181:对cline端提供服务 2.3888:选举leader使用 3.2888:集群 ...

  10. vue 中使用iconfont Unicode编码线上字体图标的流程

    1.打开http://www.iconfont.cn官网,搜索你想要的图标.添加字体图标到购物车,点击购物车然后添加至项目,点击确定 2.点击图标管理/我的项目,找到对应的文件,点击Unicode,然 ...