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. CSS3之transition&transform

    参考网页: CSS3 transform 属性使用详解: http://www.renniaofei.com/code/css3-transform-shuxing-shiyong-xiangjie/ ...

  2. 使用python制作时间戳转换工具

    使用python制作时间戳转换工具 python 时间戳转日期 日期转时间戳 前言:作为一个程序员一般情况下,json和时间戳是常用的两个工具,我咨询过很多个朋友,他们一般都是通过在线工具对json进 ...

  3. （一 ） 天猫精灵接入Home Assistant-服务器搭建

    ()1登陆阿里云 https://ecs.console.aliyun.com/?spm=5176.2020520001.0.0.6B1Uov#/home 账号dongdongmqtt 密码***** ...

  4. Javascript中的各结构的嵌套和函数

    各位朋友大家好,上周更新给大家分享了JavaScript的入门知识及各种常用结构的用法,那么,本次更新博主就跟大家更深入的聊一聊JS各结构的嵌套用法,及JS中及其常用的一种结构——函数.以下为函数和循 ...

  5. 你不得不知道的 .NET CORE —— .NET Framework, .NET Core 和 .NET Standard 的区别

    .NET Framework 和 .NET Core 是平台应用框架,而 .NET Standard 是 .NET 底层库.因此只要用 .NET Standard 工程来写的代码可以直接在上层的平台应 ...

  6. Android学习之基础知识九 — 数据存储（持久化技术）之使用LitePal操作数据库

    上一节学习了使用SQLiteDatabase来操作SQLite数据库的方法,接下来我们开始接触第一个开源库:LitePal.LitePal是一款开源的Android数据库框架,它采用了对象关系映射(O ...

  7. C语言程序设计II—第八周教学

    第八周教学总结(15/4-21/4) 教学内容 本周的教学内容为: 8.4 电码加密 知识点:指针与字符串,重难点:字符指针与字符串的关联和区别: 8.5 任意个整数求和 知识点:动态内存分配的概念和 ...

  8. iRedMail退信问题的解决(转)

    安装完iRedMail之后发现可以给外网发邮件但是收不到外网发来的邮件,查看log发现这么一句话:postfix/postscreen[11355]: NOQUEUE: reject: RCPT fr ...

  9. Django 学习 （第五部）

    表设计: from django.db import models # Create your models here. # class Foo(models.Model): # name = mod ...

  10. linux编程之信号量

    一.概念 linux信号量: 允许多个线程同时进入临界区,可以用于进程间的同步. 和互斥锁(mutex)的区别: 互斥锁只允许一个线程进入临界区. 所在头文件: semaphore.h 二.主要函数 ...