据我对cookie诞生背景的了解,cookie是由网景公司创建的,目的就是将用户的数据储存在客户端上。伴随的HTML5的出现,现在又有另外一个解决数据离线储存的方案,就是HTML5中的Web storage,其中两个重要对象sessionStorage和localStorage可以解决浏览器sessions和长期储存数据的目的,并且兼容性还不错,IE8+以上浏览器都支持。

那我们直接学习Web storage不就可以了?个人认为,这不是一个很好的学习方法。Web Storage的出现主要还是因为cookie的一些小毛病不能够满足前端工程师日常开发而被加入到HTML5中作为新的API的。本质上说,localStorage和sessionStorage实现的本质与cookie是一样的。所以在接触之前,先熟悉并且掌握cookie对于Web storage的学习还有很大的帮助。

这篇文章会涉及的内容与技术:

  • module bundler:webpack
  • javascirpt如何实现读取,写入,删除Cookie
  • js-cookie实现读取,写入,删除Cookie

cookie定义

cookie其实就是服务器保存在浏览器的一小段文本信息。怎么保存呢?浏览器在向服务器发送一个http请求时,会在发送请求的首部字段中添加Cookie字段,并且附上相应的key,value。服务器接收到请求并且正确返回响应的时候,会在响应的头部字段中添加Set-cookie字段。这时候就完成了一次数据储存的操作。当我们关闭浏览器并且再次打开的时候,相应需要存储的信息就会在expires指定的期限内存储下来。

简单的说,就是:

  • 当用户访问web页面时,他的记录可以保存在cookie中。
  • 在用户下一次访问同一页面时,可以在cookie中读取用户的访问记录。

cookie特点

  • 每个cookie的大小不能超过4KB。
  • 通过HTTP协议的方式来存储数据。
  • cookie会影响同一域名下的根目录及其子目录。举例来说,如果当前URI是keithchou.github.io,如果设置path为'/'或者不设置(默认值为/),这个cookie对该域名的根路径和它的所有子路径都有效。如果path设置为/music,那么这个cookie只有在访问keithchou.github/music及其子路径才有效。
  • 同源政策。浏览器的同源政策规定,两个网址只要域名和端口相同,就可以共享cookie。注意,这里不要求协议相同。也就是说,'http://keithchou.com'设置的cookie,可以被'https://keithchou.com'读取

cookie属性

cookie常用的属性有:

  • value
  • domain
  • path
  • expires
  • secure
  • HttpOnly

属性的具体内容就不再赘述了,属性都比较简单。

cookie实现

接下来想说说两种方式来实现cookie。一是原生javascript实现cookie,二是通过js-cookie这个小框架来实现cookie。

javascript实现数据存储

基本的cookie操作有三种:读取、写入和删除。javascript操作cookie主要是通过document.cookie来实现的。

document.cookie的一大特点是,可以读取所有的Cookie,但是每次写入cookie的时候只能一条一条写入。看一个从百度获取的cookie。

//读取cookie,一次性获取所有cookie。
console.log(document.cookie);

//每个cookie都是以键值对的形式存在,并且通过;分隔。
"BAIDUID=9BD404162B2978E266B82B0D052A12D7:FG=1; BIDUPSID=605A0EB7E85170299BCFFF6C2B042840; PSTM=1474937533; BD_UPN=13314752; ispeed_lsm=6; BDRCVFR[Fc9oatPmwxn]=G01CoNuskzfuh-zuyuEXAPCpy49QhP8; BD_HOME=0; H_PS_PSSID=1440_21421_18240_21116_21454_21377_21526_21191_21399; BD_CK_SAM=1; PSINO=7; H_PS_645EC=9c44kg7jUnDfYs5vfqg9n3QbElgAvuf8phS5ZsmD2FIE2KxSARX534GRQw1z7f0cZ6wu; locale=zh; pgv_pvi=4703388672; pgv_si=s5301332992"

//写入cookie,只能一条一条写入。
document.cookie = 'unclekeith=21';
document.cookie = 'sex=boy';
...

原生javascript实现cookie的方法如下。此代码摘自《javascript高级程序设计 第三版》。

var CookieUtil = {
    //读取cookie,判断某个cookie是否存在。
    //读取操作配合 unclekeith=21; sex=boy 这个cookie会更好理解读取cookie的操作。
    get: function (name){
        var cookieName = encodeURIComponent(name) + "=",
            cookieStart = document.cookie.indexOf(cookieName),
            cookieValue = null;
        if (cookieStart > -1){
            var cookieEnd = document.cookie.indexOf(";", cookieStart);
            if (cookieEnd == -1){
                cookieEnd = document.cookie.length;
            }
            cookieValue = decodeURIComponent(document.cookie.substring(cookieStart + cookieName.length, cookieEnd));
    }
        return cookieValue;
    },
    //写入cookie。
    set: function (name, value, expires, path, domain, secure) {
        var cookieText = encodeURIComponent(name) + "=" +
                         encodeURIComponent(value);
        if (expires instanceof Date) {
            cookieText += "; expires=" + expires.toGMTString();
        }
        if (path) {
            cookieText += "; path=" + path;
        }
        if (domain) {
            cookieText += "; domain=" + domain;
        }
        if (secure) {
            cookieText += "; secure";
        }
        document.cookie = cookieText;
    },
    //删除cookie
    unset: function (name, path, domain, secure){
        this.set(name, "", new Date(0), path, domain, secure);
    }
}; 

javascript实现cookie的代码并不复杂,只要有javascript基础,基本上都可以看懂。给出原生javascript实现cookie的操作是因为要去实际的了解一下整个过程,不然使用前端大牛封装好的库来实现cookie总感觉有一些东西特别难以理解。

js-cookie

首先我想说的是,网上大量的资料都是对$.cookie进行介绍的。官网明确指出这个项目已经不再继续维护了。为什么还要使用阿?所以不再介绍。这里要介绍另外一个实现cookie的库。js-cookie。具体的api在官网上有详细的介绍。传送门:js-cookie

首先,进入本地项目,通过cnpm安装js-cookie。

cnpm install js-cookie --save

然后,在使用webpack中的入口文件entry.js引入js-cookie。

import Cookies from 'js-cookie';

当然,接下来就可以使用了。下面是一个登录界面的小demo。

html部分
<p>
    <label for="username">用户名:</label>
    <input type="text" id='username' name='username' placeholder="请输入用户名">
</p>
<p>
    <label for="password">密码:</label>
    <input type="password" id='password' name='password' placeholder="请输入密码">
</p>
<p>
    <label for="confirm_password">再次输入密码:</label>
    <input type="password" id='confirm_password' name='confirm_password' placeholder="再次输入密码">
    <input type="checkbox" id='rememberUser'>
    <label for="rememberUser">记住用户名</label>
</p>

//js部分
//先判断浏览器是否储存有对应的cookie。
if (Cookies.get('username')) {
    $("#username").val(Cookies.get('username'));
    $('#rememberUser').attr('checked',true);
};

if (Cookies.get('password')) {
    $('#password').val(Cookies.get('password'));
    $('#confirm_password').val(Cookies.get('password'));
}

//设置cookie。当点击 记住用户名 操作时储存相应的数据。
$('#rememberUser').click(function(){
    if (this.checked) {
        if ($('#username').val() ==='') {
            alert('请输入用户名');
            this.checked = false;
        } else {
            Cookies.set('username',$('#username').val(),{
                path:'/',
                expires: 1
            });
            Cookies.set('password',$('#password').val(),{
                path:'/',
                expires: 1
            })
        }
    }
});

cookie入门的更多相关文章

  1. cookie入门与学习

    据我对cookie诞生背景的了解,cookie是由网景公司创建的,目的就是将用户的数据储存在客户端上.伴随的HTML5的出现,现在又有另外一个解决数据离线储存的方案,就是HTML5中的Web stor ...

  2. 20160329javaweb之JSP -cookie入门

    一.什么是会话? •会话可简单理解为:用户开一个浏览器,点击多个超链接,访问服务器多个web资源,然后关闭浏览器,整个过程称之为一个会话. 会话过程中要解决的一些问题? •每个用户在使用浏览器与服务器 ...

  3. Cookie 入门

    位于 javax.servlet.http 包下 1. HTTP 协议与 Cookie 关于 Cookie Cookie 是 HTTP 协议制定的!先由服务器保存 Cookie 到浏览器, 在下次浏览 ...

  4. Cookie快速入门实践

    第一个servlet[比如是CookieDemo01]中的代码如下: import javax.servlet.http.Cookie; //--------省略若干代码----------- pro ...

  5. javaWeb核心技术第八篇之Cookie和Session

    会话技术: 会话是什么? 浏览器和服务器交互,浏览器打开网页访问服务器,会话开始,正常交互. 浏览器关闭,会话结束. 会话能干什么? 会话可以共享数据. Cookie和session将数据保存在不同的 ...

  6. Web核心之会话技术Cookie&Session

    什么是会话技术? http协议是无状态协议.为了满足在多次请求之间数据进行交互,推出了会话技术. 会话概念:一次会话,指的是从客户端和服务器建立起连接开始,到客户端或服务器断开连接为止.中间可能进行多 ...

  7. 会话技术之cookie(记录当前时间、浏览记录的记录和清除)

    cookie 会话技术: 当用户打开浏览器的时候,访问不同的资源,直到用户将浏览器关闭,可以认为这是一次会话. 作用: 因为http协议是一个无状态的协议,它不会记录上一次访问的内容.用户在访问过程中 ...

  8. Asp.Net Core(.net内核)

    Asp.Net Core(.net内核) //----------------Day1----------------一章    Web基本原理 1节课程说明 web窗体--设计界面--加法使用Chr ...

  9. javaweb——总结

    day01XML上    1.XML的作用    2.XML的基本语法    3.DTD约束    4.DTD的基本语法(看懂DTD就ok)    5.XML的解析方式:原理    6.JAXP的DO ...

随机推荐

  1. 【一起学OpenFOAM】系列由来

    1 为什么要学习OpenFOAM 掐指算起来,接触CFD也差不多有十个年头了,其间一直使用的商用CFD软件,有Fluent.CFX.StarCCM+等,这些商用软件各有其优缺点,都能较好的解决常规的工 ...

  2. C#移动跨平台开发(1)环境准备

    C#依托于mono平台可以实现Unix平台服务器端开发已经不是什么新鲜事了,而Xarmain公司(初始成员大多来自原Mono.MonoTouch.Mono For Android成员)继续将C#的先进 ...

  3. Apache2.4卡住无法访问的解决……

    早两个星期,搭建了一个项目管理平台--<如何安装一个优秀的BUG管理平台--真的是手把手教学!>.以前都是用apache2.2的,这次换了apache2.4.安装起来是没有问题的,结果运行 ...

  4. MongoDB Java Driver操作指南

    MongoDB为Java提供了非常丰富的API操作,相比关系型数据库,这种NoSQL本身的数据也有点面向对象的意思,所以对于Java来说,Mongo的数据结构更加友好. MongoDB在今年做了一次重 ...

  5. ABP框架 - 动态Web Api层

    文档目录 本节内容: 创建动态Web Api控制器 ForAll 方法 重写 ForAll ForMethods Http 动词 WithVerb 方法 HTTP 特性 命名约定 Api 浏览器 Re ...

  6. 前端移动App开发环境搭建

    移动App开发环境安装 一.环境安装准备软件 二.node的安装 像安装普通软件一样,安装对应版本的node软件,安装好之后就可以运行npm命令行,比如npm init .npm install -g ...

  7. salesforce 零基础学习(五十三)多个文件生成一个zip文件(使用git上封装的代码)

    此篇参考git代码:https://github.com/pdalcol/Zippex 学习salesforce可以访问一个朋友的网站:https://www.xgeek.net 首先感谢git上提供 ...

  8. linux tree 命令

    使用cmder确实是方便了很多,想看命令帮助信息: $ help tree 以图形显示驱动器或路径的文件夹结构. TREE [drive:][path] [/F] [/A] /F 显示每个文件夹中文件 ...

  9. vue+node+es6+webpack创建简单vue的demo

    闲聊: 小颖之前一直说是写一篇用vue做的简单demo的文章,然而小颖总是给自己找借口,说没时间,这一没时间一下就推到现在了,今天抽时间把这个简单的demo整理下,给大家分享出来,希望对大家也有所帮助 ...

  10. Android自定义View之圆环交替 等待效果

    学习了前面两篇的知识,对于本篇实现的效果,相信大家都不会感觉太困难,我要实现的效果是什么样呢?下面请先看效果图: 看上去是不很炫的样子,它的实现上也不是很复杂,重点在与onDraw()方法的绘制. 首 ...