引用: JavaScript Cookie - by runoob.com

Cookie是储存在电脑文本文件中的数据，用于保存访问者的信息，并可以在下次打开页面时引用。

页面在设置/引用访问者信息时，需要在JavaScript中对Cookie进行设置，获取和检索三个函数。

例如当访问者首次访问网页时，网页会对访问者进行检索（访问者数据），无搜索信息时则页面需要访问者进行登录（设置数据），当下次再次登录时页面会自动返回访问者数据。

以下是我个人对使用Cookie保存用户名案例的解读：

1) 检索Cookie

　　页面在被打开(onload)时调用"检索函数"(checkCookie)，如果Cookie中存在访问者信息则调用"获取函数"(getCookie)并返回用户名，没有则调用"设置函数"(setCookie)对用户名进行设置。

 <body onload="checkCookie()">                              <!--当页面被打开时调用checkCookie()-->

 <script>

     function checkCookie()

     {

         var user = getCookie("username");                  //调用getCookie()中的username，若不为空则返回值(用户名)

         if (user!=""){

             alert("welcome back " + user);

         }

         else {

             user = prompt("Please enter your name: ","");  //页面弹出“请输入用户名”窗口，填写user的值

             if (user!="" && user!=null){                   //当输入的用户名不为空值时，将user作为属性调入setCookie()中

                 setCookie("username",user,30);

             }

         }

     }

 </script>

 </body>

首次登陆会弹出窗口:

2. 设置Cookie

　　通过定义函数的参数setCookie(cname,cvalue,exdays)将访问者信息的值保存到"Cookie名称"，"Cookie值"和"Cookie过期时间"中.

　　在上述检索函数中，让我输入用户名"Akon Wong"后，函数将"username","Akon Wong",30这三个值保存到setCookie(cname,cvalue,exdays)中

 function setCookie(cname,cvalue,exdays)

 {

     var d = new Date();

     d.setTime(d.getTime()+(exdays*24*60*60*10000));  //设置时间为当前时间+exdays的毫秒值(在checkCookie中，设置exdays的值为30)

     var expires = "expires="+d.toUTCString();　　　　 //设置时间为字符串显示   (toGMTString()已作废)

     document.cookie = cname+"="+cvalue+";"+expires;  //设置cookie的格式，通过checkCookie()后cookie的字符串结果为"username=Akon Wong;'到期日期'"

 }

3. 获取Cookie

　　当下次再打开页面后，页面的checkCookie函数会在getCookie函数中获取到Cookie储存的用户名"Akon Wong"，并返回值。

 function getCookie(cname)

 {

     var name = cname + "=";                                                  //定义一个值为"username="的变量

     var ca      = document.cookie.split(';');                                //将cookie的字符串数据转变为以逗号分隔的数组

     for (var i=0; i<ca.length; i++){                                         //通过for函数循环cookie的数据，

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

         if (c.indexOf(name)==0){ return c.substring(name.length,c.length); } //当数据中包含关键字"name"时，返回"username="后面的字符(即用户名)

     }

     return "";                                                               //若数据中没有找到关键字，则返回空值，进入checkCookie的初始值设置

 }

再次登录的欢迎词:

完整函数:

 <!DOCTYPE html>

 <html>

     <head>

         <meta charset="utf-8">

         <title>Set Cookies</title>

     </head>

     <body onload="checkCookie()">

         <p id="demo"></p>

         <script>

             function setCookie(cname,cvalue,exdays)

             {

                 var d = new Date();

                 d.setTime(d.getTime()+(exdays*24*60*60*1000));   //set up the due day of cookie

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

                 document.cookie = cname+"="+cvalue+"; "+expires;

                 //the type of cookie: cookieName=value; due day

             }

             function getCookie(cname)

             {

                 var name = cname + "=";

                 var ca   = document.cookie.split(';'); //return 'the "username";username; time'

                 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 "";

             }

             function checkCookie()

             {

                 //run getCookie() to check if the username is exist.

                 var user = getCookie("username");

                 if (user!=""){

                     alert("welcome back " + user);

                 }

                 else {

                     user = prompt("Please enter your name: ","");

                     //prompt() can return the message that user input

                     if (user!="" && user!=null){

                         //run setCookie() to store the messages into cookie.

                         setCookie("username",user,30);

                     }

                 }

             }

         </script>

     </body>

 </html>

20180909 解析JS Cookie的设置,获取和检索的更多相关文章

  1. js中的cookie的设置获取和检查

    设置cookiefunction setCookie(cname,cvalue,exdays) { var d = new Date(); d.setTime(d.getTime()+(exdays* ...

  2. [转]javascript js cookie的存储,获取和删除

    本文转自:http://www.jb51.net/article/13240.htm 使用方法: //1.存储Cookie //2.参数说明: 1.参数1:Cookie存储Name,参数2:Cooki ...

  3. springboot项目：登录 登录aop拦截 使用Redis与cookie 进行设置获取清除操作

    登录.登出: 第一步:在pom文件中引入依赖 <dependency> <groupId>org.springframework.boot</groupId> &l ...

  4. js cookie 页面倒计时

    疯了啦 写了一篇没有保存需求:页面倒计时 只从第一次加购开始公共方法cookie的设置 获取function getCookie(c_name){ if (document.cookie.length ...

  5. 【转】分享前端开发中通过js设置/获取cookie的一组方法

    在前端开发中,通常都需要获取并记录用户的某些操作设置,这样可以使用户下一次访问网站时不用进行重复的调整设置同一个功能. js方法的完整代码如下: var cookie = { set:function ...

  6. JS读写Cookie（设置、读取、删除）

    JS读写Cookie(设置.读取.删除) Cookie是客户端存放数据的一种方式,可用来做状态保持. 1.设置Cookie: a.无过期时间:(若不设置过期时间,默认为会话级Cookie,浏览器关闭就 ...

  7. JS访问或设置cookie的方法+跨域调用方法

    无意中从163网站获取的JS访问或设置cookie的方法,Log到日志上以防遗忘 //COOKIE功能检查function fCheckCookie(){    if(!navigator.cooki ...

  8. 【JavaScript】JS跨域设置和取Cookie

    cookie 是存储于访问者的计算机中的变量.每当同一台计算机通过浏览器请求某个页面时,就会发送这个 cookie.你可以使用 JavaScript 来创建和取回 cookie 的值.本文主要JS怎样 ...

  9. Cookie的属性（cookie的设置、获取和删除）

    每个cookie都有四个可选的属性,他们分别控制cookie的生存周期.可见性.安全性等. Cookies最初设计时,是为了CGI编程.但是,我们也可以使用Javascript脚本来操纵cookies ...

随机推荐

  1. vue中一些常见错误

    一:在抽取路由模块时路径没有更改过来 二:跨域的问题

  2. 原生DOM操作方法小结

    1.0   DOM结构 父节点 兄弟节点 当前节点 属性节点 子节点 兄弟节点 一般任意一个节点我们都会从父节点,子节点,以及兄弟节点的角度去考察.节点一般我们只需关注元素节点,属性节点及文本节点即可 ...

  3. iOS客户端与网页交互文档

    很少和客户端打交道,这次由于做会活动,要和客户端配合做个分享的功能 这里总结下基本的流程,就是前端在H5 里调用客户端的方法即可 第一部分 客户端提供需求文档 网页请求设置 客户端发起请求时在HTTP ...

  4. 使用open live writer客户端写博客(亲测有效)

    博客都开了这么久了,才开始将资料上传,但是每次都要登录网页确实很麻烦,所以就用open live writer,使用起来真的是挺方便的,所以将我在安装配置时,发现的问题汇总起来以便日后再次碰到忘记怎么 ...

  5. git——更新分支、提交代码、切换分支、合并分支

    还是直接贴教程吧:https://git-scm.com/book/zh/v2 如何把本地idea上的项目上传到github上:https://www.cnblogs.com/gougouyangzi ...

  6. 09.Spring Bean 注册 - BeanDefinitionRegistry

    基本概念 BeanDefinitionRegistry ,该类的作用主要是向注册表中注册 BeanDefinition 实例,完成 注册的过程. 它的接口定义如下: public interface ...

  7. keil编译器

    1 数组比指针效率高. 2 v4.73不能查看局部变量的值:可先将C/C++选项下的优化级别设置成O0,查看完之后修改回去.因默认级别是2级.

  8. JVM基础知识2 垃圾收集器与内存分配策略

    如何判断堆中的哪些对象可以被回收 主流的程序语言都是使用根搜索算法(GC Roots Tracing)判定对象是否存活 基本思路是:通过一系列名为“GC Roots”的对象作为起点,从这些节点开始向下 ...

  9. Spring事务管理的xml方式

    一个业务的成功: 调用的service是执行成功的,意味着service中调用的所有的dao是执行成功的.  事务应该在Service层统一控制. 如果手动去实现,则需要对dao进行代理,在方法前后进 ...

  10. <script>, <script async>, <script defer> 三种标签的区别

    <script>, <script async>, <script defer> 三种标签的区别 <script>标签 阻塞html parsing 脚 ...