js实现操作cookie的常见方法总结【创建、读取、删除】

本文实例讲述了js实现操作cookie的常见方法。分享给大家供大家参考,具体如下:

js操作cookie,可以通过开源的插件实现,方便快捷,兼容性好,同样也可以自己写;
此文主要介绍两个常用的插件:
Js.cookie.jsjQuery.cookie.js

0、Js.cookie.js

js.cookie.js : 一个简单,轻量级的JavaScript API,用于处理cookie;

下载地址:https://github.com/js-cookie/js-cookie/releases

优点:

  • 适用于所有浏览器;
  • 接受任何字符;
  • 没有依赖;
  • 支持ES模块;
  • Unobtrusive JSON support;
  • Enable custom encoding/decoding;

0.1 基本用法

#创建Cookie:

创建一个cookie,整个站点可用;

Cookies.set('name', 'value');

创建一个cookie,有效期为4天,整个站点可用;

Cookies.set('name', 'value', { expires: 4 });

注意:
expires的单位默认为“天”,那如何设置有效期小于1天呢?
解决方案如下:

//设置cookie有效期为15分钟;
var inFifteenMinutes = new Date(new Date().getTime() + 15 * 60 * 1000);
Cookies.set('foo', 'bar', {
  expires: inFifteenMinutes
});

创建一个cookie,有效期为4天,且只在当前页面所在的路径有效;

Cookies.set('name', 'value', { expires: 4, path: '' })

举例解释一下,
在 http://127.0.0.1/path1/test.html页面中设置cookie,且cookie的path设为"",那么在 http://127.0.0.1/test.html 这个页面中是获取不到那个cookie的,而在 http://127.0.0.1/path1/path2/test.html 这个页面中是可以获取到那个cookie的;

下面的两种写法,效果是一样的,整个站点可用;

Cookies.set('name', 'value', { expires: 4 });
Cookies.set('name', 'value', { expires: 4, path: '/' });

#读取Cookie:

读取某个cookie:

Cookies.get('name') // => 'value'
Cookies.get('nothing') // => undefined

读取所有可见cookie:返回的是个json对象;

Cookies.get() // => { name: 'value' , name1: 'value1' }

#删除Cookie:

删除某个cookie:

Cookies.remove('name')

删除当前页面所在路径下某个有效的cookie:

Cookies.set('name', 'value', { path: '' })
Cookies.remove('name') // fail!
Cookies.remove('name', { path: '' }) // removed!

注意:在路径path1下的页面中设置了个cookie,路径设为path1/path2

Cookies.set('name', 'value', { path: 'path1/path2' });

但在路径path1/path2中的页面中是无法删除这个cookie的,只能到路径path1下的页面中去删除:

Cookies.remove('name', { path: 'path1/path2' });

0.2 JSON支持

当穿件cookie时,可以将Array或Object作为值;

Cookies.set('name', { foo: 'bar' });

读取cookie值:

Cookies.get('name') // => '{"foo":"bar"}'
Cookies.get() // => { name: '{"foo":"bar"}' }
Cookies.getJSON('name') // => { foo: 'bar' }
Cookies.getJSON() // => { name: { foo: 'bar' } }

1、jQuery.cookie.js

Jquery.cookie.js - A simple, lightweight jQuery plugin for reading, writing and deleting cookies;
Jquery.cookie.js - 一个简单,轻量的jquery插件,用于cookie的读取、写入和删除操作;

下载地址:http://plugins.jquery.com/cookie/
Github地址:https://github.com/carhartl/jquery-cookie

注意:使用之前要引入jquery.js;

1.1 基本操作

#创建cookie:

创建一个cookie,当前页面路径有效;

$.cookie('cookieName', 'cookieValue');

此处有,举例解释一下,
在 http://127.0.0.1/path1/test.html页面中这样设置cookie,$.cookie('cookieName', 'cookieValue'),那么在 http://127.0.0.1/test.html 这个页面中是获取不到那个cookie的,而在 http://127.0.0.1/path1/path2/test.html 这个页面中是可以获取到那个cookie的;

创建一个cookie,全站点有效;

$.cookie('name', 'value', { path: '/' });

创建一个cookie,有效期为4天;

$.cookie('cookieName', 'cookieValue', { expires: 4 });

注意:
expires的单位默认为“天”,那如何设置有效期小于1天呢?
解决方案如下:

//设置cookie有效期为15分钟;
var inFifteenMinutes = new Date(new Date().getTime() + 15 * 60 * 1000);
$.cookie('cookieName', 'cookieValue', { expires: inFifteenMinutes });

创建一个cookie,并设置cookie的有效路径:

$.cookie('name', 'value', { expires: 4, path: '/website1' });

该cookie只在website1站点下有效;

#读取cookie:

读取某个cookie:

$.cookie('name'); // => "value"
$.cookie('nothing'); // => undefined

读取所有有效的cookie:(json格式)

$.cookie(); // => { "name": "value","name1":"value1" }

#删除cookie:

// 成功删除返回true,失败返回false;
$.removeCookie('name'); // => true
$.removeCookie('nothing'); // => false

// 删除时,必须使用创建时设置的属性值(path,domain 等)
$.cookie('name', 'value', { path: '/' });
// 失败
$.removeCookie('name'); // => false
// 成功
$.removeCookie('name', { path: '/' }); // => true

1.2 全局配置

#raw

cookie是否编码;(using encodeURIComponent/decodeURIComponent)

$.cookie.raw = true;

#json

是否以json格式进行存储和读取;(Assumes JSON.stringify and JSON.parse)

$.cookie.json = true;

2、参考

https://github.com/js-cookie/js-cookie
https://github.com/js-cookie/js-cookie/wiki/Frequently-Asked-Questions#why-are-my-cookies-being-deleted

更多关于JavaScript相关内容感兴趣的读者可查看本站专题:《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》、《JavaScript查找算法技巧总结》、《JavaScript动画特效与技巧汇总》、《JavaScript错误与调试技巧总结》及《JavaScript数学运算用法总结》

希望本文所述对大家JavaScript程序设计有所帮助。

(0)

相关推荐

  • javascript js cookie的存储,获取和删除

    使用方法: //1.存储Cookie //2.参数说明: 1.参数1:Cookie存储Name,参数2:Cookie要存储的值 //3.例子如下: setCookie('Method',match); //1.获取Cookie //2.参数说明: 1.参数1:Cookie存储的Name //3.例子如下: getCookie('Method') //1.删除Cookie //2.参数说明: 1.参数1:Cookie存储的Name //3.例子如下: deleteCookie('Method');

  • javascript创建和存储cookie示例

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

  • javascript cookies 设置、读取、删除实例代码

    刚整理了一些关于javascript cookies操作的文章,发现这篇文章也不错,推荐大家一起参考,选择需要的,不足的地方主要是对路径的设置,喜欢的朋友可以结合下. 复制代码 代码如下: <script> function SetCookie(name,value)//两个参数,一个是cookie的名子,一个是值 { var Days = 30; //此 cookie 将被保存 30 天 var exp = new Date(); //new Date("December 31,

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

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

  • javascript创建cookie、读取cookie

    本文内容分为两个部分进行学习,分别介绍了javascript创建cookie.javascript读取cookie的具体实现方法,供大家学习,具体内容如下 一.创建Cookie document.cookie = 'key=value';  有特殊字符 使用encodeURIComponent() 进行编码 document.cookie = 'user='+encodeURIComponent('郭钱;');  读取时 使用decodeURIComponent() 例如: document.c

  • JavaScript创建、读取和删除cookie

    Cookie 为 Web 应用程序保存用户相关信息提供了一种有用的方法.例如,当用户访问咱们的站点时,可以利用 Cookie 保存用户首选项或其他信息,这样,当用户下次再访问咱们的站点时,应用程序就可以检索以前保存的信息. Cookie 是什么鬼 Cookie 是一小段文本信息,伴随着用户请求和页面在 Web 服务器和浏览器之间传递.用户每次访问站点时,Web 应用程序都可以读取 Cookie 包含的信息. Cookie的出现是为了解决保存用户信息的问题.例如 当用户访问网页时,用户的名字可以存

  • JS设置cookie、读取cookie、删除cookie

    JavaScript是运行在客户端的脚本,因此一般是不能够设置Session的,因为Session是运行在服务器端的. 而cookie是运行在客户端的,所以可以用JS来设置cookie. 假设有这样一种情况,在某个用例流程中,由A页面跳至B页面,若在A页面中采用JS用变量temp保存了某一变量的值,在B页面的时候,同样需要使用JS来引用temp的变量值,对于JS中的全局变量或者静态变量的生命周期是有限的,当发生页面跳转或者页面关闭的时候,这些变量的值会重新载入,即没有达到保存的效果.解决这个问题

  • JS保存和删除cookie操作 判断cookie是否存在

    有时我们需要用cookie保存用户名,记录登录状态,如何正确判断该机用户cookie是否存在呢?不能简单使用a!="这样的写法. 复制代码 代码如下: a=getCookie("username3"); c_start=document.cookie.indexOf("username3="); if(c_start == -1){  $("#login_form").show();     $("#logined"

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

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

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

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

  • JS操作Cookies包括(读取添加与删除)

    一直都是简单去js实现cookie的一些操作,今天把js对cookie操作系统的整理了一遍,包括:js读取cookie,js添加cookie,js删除cookie,示例如下: 复制代码 代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http

  • asp.net通过js实现Cookie创建以及清除Cookie数组的代码

    复制代码 代码如下: <%@ Page Language="C#" AutoEventWireup="true" CodeFile="BLTZ.aspx.cs" Inherits="BLTZ" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1

随机推荐