JS-Cookie 纯 JavaScript 操作浏览器 Cookie 插件

发布于 2019-10-22 19:20:16 字数 9451 浏览 1573 评论 0

JS-Cookie 是一个简单的轻量级的 JavaScript 插件,用于在本地操作浏览器的 Cookie,提供一些简单 API 接口,方便我们添加、修改、删除 Cookie。


  • 支持在所有浏览器中工作
  • 接受任何字符
  • 严重测试
  • 不依赖
  • 不显眼的 JSON 支持
  • 支持 AMD / CommonJS
  • RFC 6265 兼容
  • 很好的 wiki
  • 启用自定义编码/解码
  • 仅仅 800 字节的压缩文件



<script src="/path/to/js.cookie.js"></script>

不要直接从 GitHub 引入脚本文件,该文件在 Windows 7 的 IE 浏览器中,会因为文档的类型不对,而导致错误,还有一点,Github 不是 CDN 托管。

还有 js-cookie 可以通过 npm and Bower 安装,包的名称为 js-cookie,如果你使用这种方式,你还需要导入 AMD 或者 CommonJS 模块。


Create a cookie, valid across the entire site:

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

Create a cookie that expires 7 days from now, valid across the entire site:

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

Create an expiring cookie, valid to the path of the current page:

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

Read cookie:

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

Read all visible cookies:

Cookies.get(); // => { name: 'value' }

Delete cookie:


Delete a cookie valid to the path of the current page:

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

警告:当删除一个Cookie的时候,你必须传递一个确切的路径、域和安全的属性来设置该 Cookie,除非你依赖于默认的属性。


If there is any danger of a conflict with the namespace Cookies, the noConflict method will allow you to define a new namespace and preserve the original one. This is especially useful when running the script on third party sites e.g. as part of a widget or SDK.

// Assign the js-cookie api to a different variable and restore the original "window.Cookies"
var Cookies2 = Cookies.noConflict();
Cookies2.set('name', 'value');

Note: The .noConflict method is not necessary when using AMD or CommonJS, thus it is not exposed in those environments.


js-cookie provides unobtrusive JSON storage for cookies.

When creating a cookie you can pass an Array or Object Literal instead of a string in the value. If you do so, js-cookie will store the string representation of the object according to JSON.stringify:

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

When reading a cookie with the default Cookies.get api, you receive the string representation stored in the cookie:

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

When reading a cookie with the Cookies.getJSON api, you receive the parsed representation of the string stored in the cookie according to JSON.parse:

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

为了兼容 IE6、7 以及 IE8 的兼容模式,你需要引入 JSON-js


Cookie attributes defaults can be set globally by setting properties of the Cookies.defaults object or individually for each call to Cookies.set(...) by passing a plain object in the last argument. Per-call attributes override the default attributes.


Define when the cookie will be removed. Value can be a Number which will be interpreted as days from time of creation or a Date instance. If omitted, the cookie becomes a session cookie.

Default: Cookie is removed when the user closes the browser.


Cookies.set('name', 'value', { expires: 365 });
Cookies.get('name'); // => 'value'


A String indicating the path where the cookie is visible.



Cookies.set('name', 'value', { path: '' });
Cookies.get('name'); // => 'value'
Cookies.remove('name', { path: '' });

Note regarding Internet Explorer:

Due to an obscure bug in the underlying WinINET InternetGetCookie implementation, IE’s document.cookie will not return a cookie if it was set with a path attribute containing a filename.

(From Internet Explorer Cookie Internals (FAQ))

This means one cannot set a path using path: window.location.pathname in case such pathname contains a filename like so: /check.html (or at least, such cookie cannot be read correctly).


A String indicating a valid domain where the cookie should be visible. The cookie will also be visible to all subdomains.

Default: Cookie is visible only to the domain or subdomain of the page where the cookie was created, except for Internet Explorer (see below).


Assuming a cookie that is being created on site.com:

Cookies.set('name', 'value', { domain: 'subdomain.site.com' });
Cookies.get('name'); // => undefined (need to read at 'subdomain.site.com')

Note regarding Internet Explorer default behavior:

Q3: If I don’t specify a DOMAIN attribute (for) a cookie, IE sends it to all nested subdomains anyway?
A: Yes, a cookie set on example.com will be sent to sub2.sub1.example.com.
Internet Explorer differs from other browsers in this regard.

(From Internet Explorer Cookie Internals (FAQ))

This means that if you omit the domain attribute, it will be visible for a subdomain in IE.


Either true or false, indicating if the cookie transmission requires a secure protocol (https).

Default: No secure protocol requirement.


Cookies.set('name', 'value', { secure: true });
Cookies.get('name'); // => 'value'
Cookies.remove('name', { secure: true });



Create a new instance of the api that overrides the default decoding implementation.
All get methods that rely in a proper decoding to work, such as Cookies.get() and Cookies.get('name'), will run the converter first for each cookie.
The returning String will be used as the cookie value.

Example from reading one of the cookies that can only be decoded using the escape function:

document.cookie = 'escaped=%u5317';
document.cookie = 'default=%E5%8C%97';
var cookies = Cookies.withConverter(function (value, name) {
    if ( name === 'escaped' ) {
        return unescape(value);
cookies.get('escaped'); // 北
cookies.get('default'); // 北
cookies.get(); // { escaped: '北', default: '北' }


Create a new instance of the api that overrides the default encoding implementation:

    read: function (value, name) {
        // Read converter
    write: function (value, name) {
        // Write converter


如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。



需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。





0 文章
0 评论
84935 人气



文章 0 评论 0


文章 0 评论 0


文章 0 评论 0


文章 0 评论 0


文章 0 评论 0

    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击“接受”或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。