主页 / 网络编程 /

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

网络编程 2021-07-04 15:02www.168986.cn编程入门
这篇文章主要介绍了js实现操作cookie的常见方法,结合实例形式分析了js操作cookie创建、读取、删除相关实现技巧与注意事项,需要的朋友可以参考下

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

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

0、Js.cookie.js

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

下载地址

优点

  • 适用于所有浏览器；
  • 接受任何字符；
  • 没有依赖；
  • 支持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的；

狼蚁网站SEO优化的两种写法，效果是一样的，整个站点可用；

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的读取、写入和删除操作；

下载地址
Github地址

注意使用之前要引入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、参考


更多关于JavaScript相关内容感兴趣的读者可查看本站专题《》、《》、《》、《》、《》及《》

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

上一篇：JavaScript实现多个物体同时运动 下一篇：基于javascript实现碰撞检测

编程语言

Copyright © 2016-2025 www.168986.cn 狼蚁网络 版权所有 Power by