js-cookie读写浏览器中的Cookie

文档：https://www.npmjs.com/package/js-cookie

npm

npm install js-cookie --save

CDN

<script src="https://cdn.jsdelivr.net/npm/js-cookie@2/src/js.cookie.min.js">script>

示例

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

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

Cookies.remove('name');

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

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

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

注意，如果set指定了额外参数path 和 domain ,那么get和remove有需要指定

测试示例

浏览器控制台进行测试

引入js库文件

$i("https://cdn.jsdelivr.net/npm/js-cookie@2/src/js.cookie.min.js")

分别对3个情况进行写入、读取、删除

1. 默认         domain=null
2. 当前子域名    domain: "www.demo.com"
3. 顶级域名      domain: ".demo.com"

测试代码

Cookies.get()
{}

// 设置cookie ，domain最前面的点可以不写
Cookies.set("name", "default")
"name=default; path=/"

Cookies.set("name", "domain", {path:"/", domain: ".demo.com"})
"name=domain; path=/; domain=.demo.com"

Cookies.set("name", "domain-www", {path:"/", domain: "www.demo.com"})
"name=domain-www; path=/; domain=www.demo.com"

// 读取 谁最后设置，读取出来的就是谁
Cookies.get()
{name: "domain-www"}

// 移除
Cookies.remove("name")
undefined

Cookies.remove("name", {path:"/", domain: "www.demo.com"})
undefined

Cookies.remove("name", {path:"/", domain: "demo.com"})
undefined

因为Cookies是基于document.cookie的

document.cookie只有两个操作

// 写(设置和删除)： 
document.cookie = value

// 读(只能读取key=value，没有属性)： 
value = document.cookie