JavaScript实例--创建一个欢迎cookie

目录
  • 一、实例代码
  • 二、实例演示
  • 三、实例剖析

一、实例代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>创建一个欢迎cookie</title>
</head>
<head>
  <script>
    function setCookie(cname, cvalue, exdays) {
      var d = new Date();
      d.setTime(d.getTime() + (exdays*24*60*60*1000));
      var expires = "expires=" + d.toGMTString();
      document.cookie = cname + "=" + cvalue + ";" + expires;
      /*
      document.cookie = "username=John Doe; expires=Sun, 31 Dec 2017 12:00:00 UTC";
      通过把 cookie 名称、cookie 值和过期字符串相加，该函数就设置了 cookie。
      */
    }
    function getCookie(cname) {
      var name = cname + "=";
      var ca = document.cookie.split(';');
      for(var i = 0; i < ca.length; i++) {
        var c = ca[i].trim();
        if(c.indexOf(name) == 0) {
          return c.substring(name.length, c.length);
        }
        return "";
      }
    }
    //检查cookie是否已存在，即检查页面是否已经访问过
    function checkCookie() {
      var user = getCookie('username');
      if(user != "") {
        alert("欢迎 " + user + " 再次访问");
      }else {
        user = prompt("请输入你的名字：", "");//返回值  如果用户单击提示框的取消按钮，则返回 null。如果用户单击确认按钮，则返回输入字段当前显示的文本。
        if(user != "" && user != null) {
          setCookie("username", user, 30);//cookie 的名字（cname），cookie 的值（cvalue），以及知道 cookie 过期的天数（exdays）。
        }
      }
    }
  </script>
</head>
<body onload="checkCookie()">
  <!-- onload属性通常写在body标签中，一旦把页面的图像，css等文件加载完后，就立即执行一段JavaScript代码 -->
</body>
</html>

二、实例演示

第一次页面加载完后跳出确认框

输入信息后点击确定，确认框消失，这个时候cookie已经创建

然后刷新页面，会从cookie中读取用户信息

因为设置了过期时间，所以关闭浏览器再打开还是会显示访问信息

查看cookie情况：

可以清楚的看见cookie的存储

三、实例剖析

方法解析：

alert("欢迎 " + user + " 再次访问");

alert(message) 方法用于显示带有一条指定消息和一个 OK 按钮的警告框。
message：要在 window 上弹出的对话框中显示的纯文本（而非 HTML 文本）

user = prompt("请输入你的名字：", "");

prompt((text,defaultText) 方法用于显示可提示用户进行输入的对话框。
text：可选。要在对话框中显示的纯文本（而不是 HTML 格式的文本）。
defaultText：可选。默认的输入文本。

var d = new Date();
d.setTime(d.getTime() + (exdays*24*60*60*1000));

Date()方法返回当前的日期时间

setTime(millisec)在1970年01月01日上添加毫秒数，然后返回新的日期。
millisec：必需的，是一个毫秒值

getTime() 方法可返回距 1970 年 1 月 1 日之间的毫秒数。
setTime和getTime方法都与1970年1月1日有关

var expires = "expires=" + d.toGMTString();

toGMTString() 方法可根据格林威治时间 (GMT) 把 Date 对象转换为字符串，并返回结果。

var ca = document.cookie.split(';');

split() 方法用于把一个字符串分割成字符串数组。

var c = ca[i].trim();

去除字符串的头尾空格

if(c.indexOf(name) == 0)

indexOf() 方法可返回某个指定的字符串值在字符串中首次出现的位置。

return c.substring(name.length, c.length);

substring() 方法用于提取字符串中介于两个指定下标之间的字符。
substring() 方法返回的子串包括 开始 处的字符，但不包括 结束 处的字符。

实例执行原理解析：

页面js总共由三个函数组成，checkCookie()，setCookie()和getCookie()

<body onload="checkCookie()"></body>这里在body的onload属性上写了一个函数

checkCookie()，当页面加载完后，便会自动执行checkCookie()函数里的代码

首先通过getCookie()函数获取用户信息

getCookie函数中：
var ca = document.cookie.split(’;’);生成的ca字符串数组长度为1，就是cookie的值，如果有多个cookie的话，中间会用;符号分割

然后通过判断获取的字符是否为空来判断获取结果，如果不为空则直接弹出弹窗欢迎用户，如果为空说明还没有访问过，弹出弹窗让用户输入信息记录，然后调用setCookie()函数来记录用户信息

在setCookie()函数中设置cookie方式

document.cookie = “username=John Doe; expires=Sun, 31 Dec 2017 12:00:00 UTC”;
通过把 cookie 名称、cookie 值和过期时间字符串相加，该函数就设置了 cookie。

到此这篇关于JavaScript实例--创建一个欢迎cookie的文章就介绍到这了,更多相关JavaScript创建一个欢迎cookie内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • JavaScript创建一个欢迎cookie弹出窗实现代码

    JavaScript创建一个欢迎cookie弹出窗实现代码

    用JavaScript创建一个欢迎cookie 软件代码编辑器,我用的是editplus:当然还有浏览器. 步骤 先在编辑器里写入代码: 运行代码,并写入自己的名字:得到欢迎cookie.

  • JavaScript实例--创建一个欢迎cookie

    JavaScript实例--创建一个欢迎cookie

    目录 一.实例代码 二.实例演示 三.实例剖析 一.实例代码 <!DOCTYPE html> <html lang="en"> <head>   <meta charset="UTF-8">   <meta http-equiv="X-UA-Compatible" content="IE=edge">   <meta name="viewport&qu

  • javascript学习笔记（七）利用javascript来创建和存储cookie

    首先看一下基础知识: 1.什么是cookie cookie 是存储于访问者的计算机中的变量.每当同一台计算机通过浏览器请求某个页面时,就会发送这个 cookie.你可以使用 JavaScript 来创建和取回 cookie 的值 2.有关cookie的例子: •名字 cookie 当访问者首次访问页面时,他或她也许会填写他/她们的名字.名字会存储于 cookie 中.当访问者再次访问网站时,他们会收到类似 "Welcome John Doe!" 的欢迎词.而名字则是从 cookie 中

  • 详解JavaScript如何创建一个非自动播放的GIF网络组件

    详解JavaScript如何创建一个非自动播放的GIF网络组件

    目录 一些很可爱的测试数据 构建Web组件 逻辑 结果 今天,我将向您展示如何创建一个允许您的用户决定是否要播放 gif 的 Web 组件!让我们开始吧. 一些很可爱的测试数据 这里用的gif是小骆驼和猫的这种可爱互动: 哇,太可爱了!我可以看一天这个 构建 Web 组件 对于这个 Web 组件,我们需要一些东西: 画布(“缩略图”所在的位置) 一张图片(实际的 gif) 标有“gif”的标签 一些造型 让我们这样做: const noAutoplayGifTemplate = document

  • javascript创建和存储cookie示例

    什么是cookie?cookie是存储于访问者的计算机中的变量.每当同一台计算机通过浏览器请求某个页面时,就会发送这个 cookie.你可以使用 JavaScript 来创建和取回 cookie 的值. cookie使用场景: 名字cookie当访问者首次访问页面时,他或她也许会填写他/她们的名字.名字会存储于 cookie 中.当访问者再次访问网站时,他们会收到类似 "Welcome John Doe!" 的欢迎词.而名字则是从 cookie 中取回的. 密码cookie当访问者首次

  • 什么是cookie?js手动创建和存储cookie

    什么是cookie? cookie 是存储于访问者的计算机中的变量.每当同一台计算机通过浏览器请求某个页面时,就会发送这个 cookie.你可以使用 JavaScript 来创建和取回 cookie 的值. 有关cookie的例子: 名字 cookie 当访问者首次访问页面时,他或她也许会填写他/她们的名字.名字会存储于 cookie 中.当访问者再次访问网站时,他们会收到类似 "Welcome John Doe!" 的欢迎词.而名字则是从 cookie 中取回的. 密码 cookie

  • 如何在JavaScript中创建具有多个空格的字符串？

    通过创建变量 var a = 'something' + '                         ' + 'something' 我得到这个值:'something something'. 如何在JavaScript中创建一个包含多个空格的字符串? 使用\xa0- 它是一个NO-BREAK SPACE char. 从UTF-8编码表和Unicode字符引用,可以写成如下: var a = 'something' + '\xa0\xa0\xa0\xa0\xa0\xa0\xa0' + '

  • javascript动态创建表格及添加数据实例详解

    本文实例讲述了javascript动态创建表格及添加数据的方法.分享给大家供大家参考.具体分析如下: 1. 动态创建表格(代码不兼容IE6) <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>动态

  • JavaScript对象创建模式实例汇总

    本文实例总结了JavaScript对象创建模式.分享给大家供大家参考,具体如下: 在JavaScript中创建对象是很容易的,可以使用对象字面量或者构造函数.常用的创建对象的模式有以下几种: 一. 工厂模式 工厂模式抽象了具体对象的过程,用函数来封装以特ing接口创建对象的细节. 如下: function createAnimal(name, age) { var o = new Object(); o.name = name; o.age = age; o.sayName = function

  • JavaScript创建一个object对象并操作对象属性的用法

    本文实例讲述了JavaScript创建一个object对象并操作对象属性的用法.分享给大家供大家参考.具体分析如下: 下面的JS代码创建了一个myMovie对象,并给对象title和director属性赋值,通过Object定义对象,其属性可以不用定义,直接调用即可,非常简单. <script type="text/javascript"> var myMovie = new Object(); myMovie.title = "Aliens"; myM

随机推荐