JavaScript Cookie介绍
一个简单、轻量级的JavaScript API,用于处理Cookie
安装
<script src="https://cdn.bootcdn.net/ajax/libs/js-cookie/3.0.1/js.cookie.min.js"></script>
基本用法
创建一个在整个网站上有效的cookie:
Cookies.set('name', 'value')
创建一个7天后过期的cookie,在整个站点上有效:
Cookies.set('name', 'value', { expires: 7 })
创建对当前页面路径有效的过期cookie:
Cookies.set('name', 'value', { expires: 7, path: '' })
读取cookie:
Cookies.get('name') // => 'value'
Cookies.get('nothing') // => undefined
读取所有可见cookie:
Cookies.get() // => { name: 'value' }
*注意:通过传递一个cookie属性(可能是也可能不是)来读取特定的cookie是不可能的
在编写所述cookie时使用):*
Cookies.get('foo', { domain: 'sub.example.com' }) // `domain` won't have any effect...!
名为的 foo
cookie将仅在以下日期提供 .get()
如果从调用代码的地方可见;读取时,域和/或路径属性不会产生影响。
删除cookie:
Cookies.remove('name')
删除对当前页面路径有效的cookie:
Cookies.set('name', 'value', { path: '' })
Cookies.remove('name') // fail!
Cookies.remove('name', { path: '' }) // removed!
这很重要!删除cookie时,如果您不依赖默认属性,则必须传递与设置cookie完全相同的路径和域属性:
Cookies.remove('name', { path: '', domain: '.yourdomain.com' })
注意:删除不存在的cookie既不会引发任何异常,也不会返回任何值。
命名空间冲突
如果存在与名称空间 Cookies
冲突的危险,noConflict
方法将允许您定义新名称空间并保留原始名称空间。当在第三方站点上运行脚本时,这尤其有用,例如作为小部件或SDK的一部分。
// 将js cookie api分配给不同的变量,并恢复原始的“window.Cookies”
var Cookies2 = Cookies.noConflict()
Cookies2.set('name', 'value')
注意:在 .noConflict
方法在使用AMD或CommonJS时不是必需的,因此它不会在这些环境中公开。
Cookie属性
Cookie属性默认值可以通过 withAttributes()
创建api实例来全局设置,也可以通过传递一个普通对象作为最后一个参数来单独设置对`Cookie.set(…)
的每次调用。每次调用属性覆盖默认属性。
过期
定义何时删除cookie。值必须是 Number
这将被解释为从创建时算起的天数或 日期
例如。如果省略,cookie将成为会话cookie。
要创建一个在一天内过期的cookie,您可以查看 Wiki上的常见问题。
默认值:当用户关闭浏览器时,将删除Cookie。
例如:
Cookies.set('name', 'value', { expires: 365 })
Cookies.get('name') // => 'value'
Cookies.remove('name')
路径
在 String
指示cookie可见的路径。
默认值: /
例如:
Cookies.set('name', 'value', { path: '' })
Cookies.get('name') // => 'value'
Cookies.remove('name', { path: '' })
关于Internet Explorer的说明:
由于基础WinINET InternetGetCookie实现中的一个模糊错误,IE的文档。如果设置了包含文件名的路径属性,cookie将不会返回cookie。
(From Internet Explorer Cookie Internals (FAQ))
这意味着不能使用 window.location.pathname
设置路径,如果这样的路径名包含这样的文件名: /check.html
(或者至少,这样的cookie无法正确读取)。
事实上,您不应该允许不受信任的输入设置cookie属性,否则您可能会受到XSS攻击。
域名
A String
指示cookie应可见的有效域。cookie也将对所有子域可见。
默认值: Cookie仅对创建Cookie的页面的域或子域可见,Internet Explorer除外(见下文)。
示例:
假设正在 site.com
上创建cookie:
Cookies.set('name', 'value', { domain: 'subdomain.site.com' })
Cookies.get('name') // => undefined (need to read at 'subdomain.site.com')
关于Internet Explorer默认行为的注意事项:
Q3: 如果我没有为cookie指定域属性,IE会将其发送到所有嵌套的子域吗?
A: 是的,cookie上的example.com集将被发送到sub2.sub1.example.com。
Internet Explorer在这方面与其他浏览器不同。
这意味着如果您省略了 domain
属性,它将在IE的子域中可见。
安全的
可以是 true
或 false
,指示cookie传输是否需要安全协议(https)。
默认值: 没有安全协议要求。
示例:
Cookies.set('name', 'value', { secure: true })
Cookies.get('name') // => 'value'
Cookies.remove('name')
相同站点
A String
, 允许控制浏览器是否随跨站点请求一起发送cookie。
默认值:未定义。
请注意,最近的浏览器将“Lax”设置为默认值,即使没有在此处指定任何内容。
示例:
Cookies.set('name', 'value', { sameSite: 'strict' })
Cookies.get('name') // => 'value'
Cookies.remove('name')
设置默认值
const api = Cookies.withAttributes({ path: '/', domain: '.example.com' })
转换器
查看
创建api的新实例,以覆盖默认解码实现。所有依赖于正确解码的get方法,如 Cookies.get()
和 Cookies.get('name')
,都将为每个cookie运行给定的转换器。返回的值将用作cookie值。
读取只能使用 escape
功能解码的其中一个cookie的示例:
document.cookie = 'escaped=%u5317'
document.cookie = 'default=%E5%8C%97'
var cookies = Cookies.withConverter({
read: function (value, name) {
if (name === 'escaped') {
return unescape(value)
}
// 对于所有其他cookie,返回默认值
return Cookies.converter.read(value, name)
}
})
cookies.get('escaped') // 北
cookies.get('default') // 北
cookies.get() // { escaped: '北', default: '北' }
写入
创建重写默认编码实现的api的新实例:
Cookies.withConverter({
write: function (value, name) {
return value.toUpperCase()
}
})