文档章节

cookie学习指南

m
 ministarstar
发布于 2017/04/26 17:43
字数 2031
阅读 4
收藏 0
点赞 0
评论 0

一、什么是cookie

cookie也叫HTTP cookie,最初是用来客户端和服务器端进行会话用的,由于HTTP是一种无状态的协议,为了维持用户和跟踪用户信息,所以引入了cookie和session,cookie主要是存放在客户端,session是存放在服务器端的

 

二、cookie的限制

每个特定域名下面的cookie数量是有限制的,fixfox是50个,Opera是30个,chrome和safari是没有限制的,并且每个cookie的限制最大是4K,如果cookie的内容超过4K的话,那么调用的时候就会返回一个空的字符串

这里要注意的是,假如cookie是存放在本地磁盘中的,那么chrome是无法在控制台进行输出的,这个时候的解决方法是换一种浏览器试一试

 PS:由于HTTP会在你每次发起网络请求的时候就附带上,所以出于功能和性能上面的考虑,应该尽量的减少cookie的使用数量,并且使用相对较小的cookie

三、cookie的基本使用

cookie 有域和路径这个概念。域就是domain的概念,因为浏览器是个注意安全的环境,所以不同的域之间是不能互相访问 cookie 的(当然可以通过特殊设置的达到 cookie 跨域访问)。路径就是routing的概念,一个网页所创建的 cookie 只能被与这个网页在同一目录或子目录下得所有网页访问,而不能被其他目录下得网页访问

cookie是由键值对组成的一种存储方式,大致的格式为name=value

Document.cookie=name=value;[exprises=date];[path=path]      []为可选内容

下面我们就来介绍通过一个小例子来介绍一下,cookie假设我们想要制作这样一个功能,在用户登陆界面的时候将用户的个人信息存进cookie以便后期的使用,相关的代码如下:

 

复制代码

<html>
    <head>
        <title>模拟用户登陆DEMO</title>
        <meta charset="utf-8" >
    </head>
    <body>
        <table>
            <tr>
                <td>
                <input id="user" placeholder="用户名" type="text" style="width:200px;" />
                </td>
            </tr>
            <tr>
                <td>
                <input id="pwd" placeholder="密码" type="password" style="width:200px;">
                </td>
            </tr>
            <tr>
                <td>
                <input onclick="btn_certain()" id="certain" value="确定" type="button" style="background:blue;color:white" />
                </td>
            </tr>
        </table>
        
    </body>
    <script>
        function btn_certain(){
            //获取输入控件的对象
            var user=document.getElementById("user");
            var pwd=document.getElementById("pwd");
            //获取点击时候的值
            var input_user=user.value;
            var input_pwd=pwd.value;
            console.log('uerName='+input_user);
            //将这两个值分别写入cookie中
            document.cookie="uerName=123";
            document.cookie="userPwd="+input_pwd;
        }
        //btn.onclick(function(){
            //alert(1);
        //});
        
    </script>
</html>

复制代码

 

运行一下结果如下:

 

 从这里我们可以看到已经生成了两个本地的cookie分别是userName和userPwd这两个cookie,这里要注意的是在hcrome下面是无法查看本地cookie的,所以以上的示例是在fixfox下面查看的

 不到到有没有细心的同学发现,上面的例子中创建两个cookie是通过重复doucment.cookie这个属性的,但是这里有别于JavaScript中的字符串覆盖这个概念,每创建一个cookie都要调用doucment.cookie,这样只会创建cookie不会覆盖掉之前的cookie内容

上面的例子除了阐述了怎样去创建cookie,同时也是可以用来修改cookie的,修改cookie原理也是一样的在你将字符串赋值给document.cookie的时候,如果是name没有存在的时候,则创建一个新的cookie,如果是存在这个cookie则将这个cookie对应的value给更改了

 已经说了新增和修改的实现,接下来就剩下删除和查询cookie

 接着我们就从删除来一步一步说起

 删除cookie

 在cookie的操作之中我们是没有办法直接对cookie进行删除的,但是我们可以换个方向去思考,因为cokie有一个有效的时间,那么如果我们让cookie有效的时间处于过期的话,那么这个cookie相当于是不生效了,所以效果可以等同于被删除了一样(默认的cookie不设置时间的有效期是当你关闭浏览器的时候就过期了)

  我们根据上面的例子添加一个按钮和y一段触发脚本,具体如下:

 

复制代码

function btn_deleteUser(){
            //获取用户输入框的值
            var user=document.getElementById("user");
            var input=user.value;
            //创建时间对象并获取当前时间
            var date=new Date();
            //将时间设置为当前时间的前一天
            date.setDate(date.getDate()-1);
            //将时间转换成为GMT格式
            var time=date.toGMTString();
            //给字段设置过期时间
            document.cookie="uerName="+input+";expires="+time;
            
        }

复制代码

 

这个脚本的思路就是可以实现对某个cookie进行删除的功能

查找cookie

这里要查找某个cookie的值是否存在,这里我们具体要做得是,首先要判断cookie的值是否空,然后就要判断你输入的cookie name是否存在,如果存在获取它对应的value值,具体的代码W3 School已经给出了,具体如下:

复制代码

function getCookie(c_name){
    if (document.cookie.length>0){  //先查询cookie是否为空,为空就return ""
      c_start=document.cookie.indexOf(c_name + "=")  //通过String对象的indexOf()来检查这个cookie是否存在,不存在就为 -1  
      if (c_start!=-1){ 
        c_start=c_start + c_name.length+1  //最后这个+1其实就是表示"="号啦,这样就获取到了cookie值的开始位置
        c_end=document.cookie.indexOf(";",c_start)  //其实我刚看见indexOf()第二个参数的时候猛然有点晕,后来想起来表示指定的开始索引的位置...这句是为了得到值的结束位置。因为需要考虑是否是最后一项,所以通过";"号是否存在来判断
        if (c_end==-1) c_end=document.cookie.length  
        return unescape(document.cookie.substring(c_start,c_end))  //通过substring()得到了值。想了解unescape()得先知道escape()是做什么的,都是很重要的基础,想了解的可以搜索下,在文章结尾处也会进行讲解cookie编码细节
      } 
    }
    return ""
  }

复制代码

全部cookie的删除

要实现全部cookie的删除,按照我的实现思路是,首先要通过字符串切割的方法获取每个如:name=value的字符串,然后对这些字符串进行 在每个切割后的小字符串后面加上一个过期的时间,这样就可以实现cookie全部删除了.

 

四、cookie的其他用法

 cookie除了有exprise这个属性之后还有path这个属性,这个属性是用来设置可访问到cookie的路径的,默认的是在当前cookie页面的子目录下是可以访问到的,但是默认的情况下我们是无法再其他父目录下面访问到这个cookie,这个时候我们就可以通过设置cookie来实现这个功能

我们假设我们的文件是存放在 www.leslieyong.com/cn/dowload/index.html,那么默认在dowload目录下面才可以访问到cookie,这个时候我们可以通过设置path属性来实现在www.leslieyong.com根目录下面也可以访问到的效果,具体如下:

document.cookie = "name=value;expires=date;path=/"

要实现在cn目录下面可以访问应该是这样写的

document.cookie = "name=value;expires=date;path=/cn/"

 如上面所说,这样做我们可以实现在同域之间的传值,但是在跨域之间的传值要怎样实现呢,其实cookie除了有path,还存在domain,domain这个属性是可以实现跨域的,但是必须保证这两个域名有公共部分,何为公共部分?就是像www.qq.com和www.sport.qq.com 这样都有相同的qq.com的域名,具体的使用方法是把domain设置为相同部分的域名,具体如下:

document.cookie = "name=value;expires=date;path=/;domain=qq.com"

另外在使用cookie的时候我们还需要注意的是cookie的编码问题,因为在cookie是不支持逗号、空格、分号的,所以在设置cookie的时候,需要使用escape()将输入的信息进行转码,然后在要调用的时候使用unescape()来重新转换回来,这个输入JavaScript的基础知识点的范畴之内

本文转载自:http://www.cnblogs.com/st-leslie/p/5720460.html

共有 人打赏支持
m
粉丝 0
博文 7
码字总数 1035
作品 0
前端相关大杂烩

前端基础面试题(JS部分) 前端基础面试题(JS部分) 学习 React.js 比你想象的要简单 原文地址:Learning React.js is easier than you think 原文作者:Samer Buna 译文出自:掘金翻译计划 本文...

掘金官方 ⋅ 01/12 ⋅ 0

HP-Socket v4.2.1,高性能 TCP & HTTP 通信框架

HP-Socket 是一套通用的高性能 TCP/UDP/HTTP 通信框架,包含服务端组件、客户端组件和 Agent 组件,广泛适用于各种不同应用场景的 TCP/UDP/HTTP 通信系统,提供 C/C++、C#、Delphi、E(易语言...

伤神小怪兽 ⋅ 2017/04/21 ⋅ 22

15本Web开发人员应该拥有的免费电子书籍

当今互联网已经成为每一个人的信息知识来源。假如你想学习任何事情,可以很容易在互联网上轻松找到相关的信息,即使它是很简单的事情。在互联网上有成千上万的教程和指南可以用来学习与工作相...

V ⋅ 2011/07/10 ⋅ 0

网易音乐前端实习程序员面试的10个问题,你会几个?

近日,w3cschool app开发者头条上分享了网易音乐前端实习程序员面经,引来了不少程序员粉丝们的围观。 在分享网易音乐前端实习面试问题之前,w3cschool先跟小伙伴们分享前端学习干货: 0、h...

W3Cschool ⋅ 04/17 ⋅ 0

python爬虫(六)_urllib2:handle处理器和自定义opener

本文将介绍handler处理器和自定义opener,更多内容请参考:python学习指南 opener和handleer 我们之前一直使用的是urllib2.urlopen(url)这种形式来打开网页,它是一个特殊的opener(也就是模块...

小七奇奇 ⋅ 2017/11/21 ⋅ 0

WEB前端性能优化基本套路

前言 前端性能优化这是一个老生常谈的话题,但是还是有很多人没有真正的重视起来,或者说还没有产生这种意识。 当用户打开页面,首屏加载速度越慢,流失用户的概率就越大,在体验产品的时候性...

32氪 ⋅ 2017/07/31 ⋅ 0

IOS学习资料

iOS 7人机交互指南-UI设计基础-Typography and Color(文字和色彩) iOS 7人机交互指南-UI设计基础-Branding(品牌化) iOS 7人机交互指南-UI设计基础-Integrating with iOS(整合iOS系统) ...

Michaelyn ⋅ 2014/05/26 ⋅ 0

curl命令使用实例

header cookie post get 文件上传 doc curl网站开发指南

go4it ⋅ 2016/12/06 ⋅ 0

HP-Socket v4.3.1,高性能 TCP & HTTP 通信框架

  HP-Socket 是一套通用的高性能 TCP/UDP/HTTP 通信框架,包含服务端组件、客户端组件和 Agent 组件,广泛适用于各种不同应用场景的 TCP/UDP/HTTP 通信系统,提供 C/C++、C#、Delphi、E(易...

伤神小怪兽 ⋅ 2017/07/17 ⋅ 10

推荐10个很棒的AngularJS学习指南

AngularJS 是非常棒的JS框架,能够创建功能强大,动态功能的Web app。AngularJS自2009发布以来,已经广泛应用于Web 开发中。但是对想要学习Angular JS 的人而言,只有官方文档,那是万万不够...

葡萄城控件技术团队 ⋅ 2015/11/24 ⋅ 1

没有更多内容

加载失败,请刷新页面

加载更多

下一页

高并发之Nginx的限流

首先Nginx的版本号有要求,最低为1.11.5 如果低于这个版本,在Nginx的配置中 upstream web_app { server 到达Ip1:端口 max_conns=10; server 到达Ip2:端口 max_conns=10; } server { listen ...

算法之名 ⋅ 今天 ⋅ 0

Spring | IOC AOP 注解 简单使用

写在前面的话 很久没更新笔记了,有人会抱怨:小冯啊,你是不是在偷懒啊,没有学习了。老哥,真的冤枉:我觉得我自己很菜,还在努力学习呢,正在学习Vue.js做管理系统呢。即便这样,我还是不...

Wenyi_Feng ⋅ 今天 ⋅ 0

博客迁移到 https://www.jianshu.com/u/aa501451a235

博客迁移到 https://www.jianshu.com/u/aa501451a235 本博客不再更新

为为02 ⋅ 今天 ⋅ 0

win10怎么彻底关闭自动更新

win10自带的更新每天都很多,每一次下载都要占用大量网络,而且安装要等得时间也蛮久的。 工具/原料 Win10 方法/步骤 单击左下角开始菜单点击设置图标进入设置界面 在设置窗口中输入“服务”...

阿K1225 ⋅ 今天 ⋅ 0

Elasticsearch 6.3.0 SQL功能使用案例分享

The best elasticsearch highlevel java rest api-----bboss Elasticsearch 6.3.0 官方新推出的SQL检索插件非常不错,本文一个实际案例来介绍其使用方法。 1.代码中的sql检索 @Testpu...

bboss ⋅ 今天 ⋅ 0

informix数据库在linux中的安装以及用java/c/c++访问

一、安装前准备 安装JDK(略) 到IBM官网上下载informix软件:iif.12.10.FC9DE.linux-x86_64.tar放在某个大家都可以访问的目录比如:/mypkg,并解压到该目录下。 我也放到了百度云和天翼云上...

wangxuwei ⋅ 今天 ⋅ 0

PHP语言系统ZBLOG或许无法重现月光博客的闪耀历史[图]

最近在写博客,希望通过自己努力打造一个优秀的教育类主题博客,名动江湖,但是问题来了,现在写博客还有前途吗?面对强大的自媒体站点围剿,还有信心和可能型吗? 至于程序部分,我选择了P...

原创小博客 ⋅ 今天 ⋅ 0

IntelliJ IDEA 2018.1新特性

工欲善其事必先利其器,如果有一款IDE可以让你更高效地专注于开发以及源码阅读,为什么不试一试? 本文转载自:netty技术内幕 3月27日,jetbrains正式发布期待已久的IntelliJ IDEA 2018.1,再...

Romane ⋅ 今天 ⋅ 0

浅谈设计模式之工厂模式

工厂模式(Factory Pattern)是 Java 中最常用的设计模式之一。这种类型的设计模式属于创建型模式,它提供了一种创建对象的最佳方式。 在工厂模式中,我们在创建对象时不会对客户端暴露创建逻...

佛系程序猿灬 ⋅ 今天 ⋅ 0

Dockerfile基础命令总结

FROM 指定使用的基础base image FROM scratch # 制作base image ,不使用任何基础imageFROM centos # 使用base imageFROM ubuntu:14.04 尽量使用官方的base image,为了安全 LABEL 描述作...

ExtreU ⋅ 昨天 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部