JavaScript实现cookie的写入、读取、删除功能

69 阅读 0 评论 46 点赞

我是靠谱客的博主长情月亮，最近开发中收集的这篇文章主要介绍JavaScript实现cookie的写入、读取、删除功能，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

cookie 是存在有效期的，在默认情况下，一个 cookie 的生命周期就是在浏览器关闭的时候结束，本文给大家介绍关于javascript对于cookie的简单操作，比如对于cookie的写入和删除，代码简单易懂，需要的朋友参考下

在没介绍正文之前，先给大家介绍Cookie的基础知识

首先了解什么是cookie

　　“cookie 是存储于访问者的计算机中的变量。每当同一台计算机通过浏览器请求某个页面时，就会发送这个 cookie。你可以使用 JavaScript 来创建和取回 cookie 的值。”

cookie 是访问过的网站创建的文件，用于存储浏览信息，例如个人资料信息。

　　从JavaScript的角度看，cookie 就是一些字符串信息。这些信息存放在客户端的计算机中，用于客户端计算机与服务器之间传递信息。

　　在JavaScript中可以通过 document.cookie 来读取或设置这些信息。由于 cookie 多用在客户端和服务端之间进行通信，所以除了JavaScript以外，服务端的语言（如PHP）也可以存取 cookie。

Cookie 基础知识

cookie 是有大小限制的，每个 cookie 所存放的数据不能超过4kb，如果 cookie 字符串的长度超过4kb，则该属性将返回空字符串。

由于 cookie 最终都是以文件形式存放在客户端计算机中，所以查看和修改 cookie 都是很方便的，这就是为什么常说 cookie 不能存放重要信息的原因。

每个 cookie 的格式都是这样的：<cookie名>=<值>；名称和值都必须是合法的标示符。

cookie 是存在有效期的。在默认情况下，一个 cookie 的生命周期就是在浏览器关闭的时候结束。如果想要 cookie 能在浏览器关掉之后还可以使用，就必须要为该 cookie 设置有效期，也就是 cookie 的失效日期。

alert(typeof document.cookie)结果是 string，曾经我以为是array，还闹过笑话...囧

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

其实创建cookie的方式和定义变量的方式有些相似，都需要使用 cookie 名称和 cookie 值。同个网站可以创建多个 cookie ，而多个 cookie 可以存放在同一个cookie 文件中。

Cookie常见问题

cookie 存在两种类型：

你浏览的当前网站本身设置的cookie

来自在网页上嵌入广告或图片等其他域来源的第三方 cookie (网站可通过使用这些 cookie 跟踪你的使用信息)
刚刚基础知识里面有说到 cookie 生命周期的问题，其实 cookie 大致可分为两种状态：

临时性质的cookie。当前使用的过程中网站会储存一些你的个人信息，当浏览器关闭后这些信息也会从计算机中删除
设置失效时间的cookie。就算浏览器关闭了，这些信息业依然会在计算机中。如登录名称和密码，这样无须在每次到特定站点时都进行登录。这种cookie 可在计算机中保留几天、几个月甚至几年。

cookie 有两种清除方式：

通过浏览器工具清除 cookie (有第三方的工具，浏览器自身也有这种功能)
通过设置 cookie 的有效期来清除 cookie

注：删除 cookie 有时可能导致某些网页无法正常运行

浏览器可以通过设置来接受和拒绝访问 cookie。

出于功能和性能的原因考虑，建议尽量降低 cookie 的使用数量，并且要尽量使用小 cookie。

关于cookie编码的细节问题将会在cookie高级篇中单独介绍。

假如是本地磁盘中的页面，chrome的控制台是无法用JavaScript读写操作 cookie 的，解决办法...换一个浏览器^_^。

本章节分享几段关于javascript对于cookie的简单操作，比如对于cookie的写入和删除。

代码很简单，比较适合对于cookie基本操作还不太熟练的朋友参考。

一.写入cookie:

 
     ? 
    
          //两个参数，一个是cookie的名子，一个是值 
         
          function 
           SetCookie(name,value){ 
         
          var 
           Days = 30; 
          //此 cookie 将被保存 30 天 
         
          var 
           exp =  
          new 
           Date(); 
          //new Date("December 31, 9998"); 
         
          exp.setTime(exp.getTime() + Days*24*60*60*1000); 
         
          document.cookie = name +  
          "=" 
          + escape (value) +  
          ";expires=" 
           + exp.toGMTString(); 
         
          }

二.读取cookie:

 
     ? 
    
 
          //取cookies函数   
         
 
          function 
           getCookie(name){ 
         
 
            
          var 
           arr = document.cookie.match( 
          new 
           RegExp( 
          "(^| )" 
           + name +  
          "=([^;]*)(;|$)" 
          )); 
         
 
            
          if 
           (arr !=  
          null 
          )  
          return 
           unescape(arr[2]);  
          return 
           null 
          ; 
         
 
          } 
         

三.删除cookie:

 
     ? 
    
          //删除cookie 
         
          function 
           delCookie(name){ 
         
          var 
           exp =  
          new 
           Date(); 
         
          exp.setTime(exp.getTime() - 1); 
         
          var 
           cval = getCookie(name); 
         
          if 
           (cval !=  
          null 
          ) document.cookie = name +  
          "=" 
           + cval +  
          ";expires=" 
           + exp.toGMTString(); 
         
          }