【踩坑日记】js-cookie API文档

js-cookie API文档

js-cookie是用于处理 Cookie 的简单、轻量级 JavaScript API。

官网：js-cookie - npm (npmjs.com)

引用方法：

1.直接饮用cdn：

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

2.本地下载下来后：

<script src="/static/js/js.cookie.js"></script>

3.模块化开发时:

import Cookies from 'js-cookie'

创建

//创建cookie
Cookies.set('name', 'value');
//创建有效期为7天的cookie
Cookies.set('name', 'value', { expires: 7 });
//有效期7天的cookie
Cookies.set('name', 'value', { expires: 7, path: '' });
设置json
Cookies.set('name', { username: 'value' });

读取

//获得cookie的值
Cookies.get('name');
//获得所有cookie
Cookies.get(); // => { name: 'value' }

删除

//删除cookie时必须是同一个路径的
Cookies.remove('name');

//假如值设置了路径，不能用简单的delete方法删除值，需要在delete时指定路径
Cookies.set('name', 'value', { path: '' });
Cookies.remove('name'); // 删除失败
Cookies.remove('name', { path: '' }); // 删除成功
#注意，删除不存在的cookie不会报错也不会有返回

命名空间冲突

如果存在与命名空间冲突的危险，该方法将允许您定义一个新的命名空间并保留原始命名空间。在第三方站点上运行脚本时，例如作为小部件或 SDK 的一部分，这尤其有用。

var Cookies2 = Cookies.noConflict()
Cookies2.set('name', 'value')

#注意：使用 AMD 或 CommonJS 时，.noConflict方法不是必需的，因此在这些环境中不会公开。

Json相关操作

如果你通过set方法，传入数组或对象，不是string，那么js-cookie会将你传入的数据用JSON.stringify转换为string保存。

Cookies.set('name', { username: 'tom' });
Cookies.get('name'); # => '{"username":"tom"}'
Cookies.get(); # => { name: '{"username":"tom"}' }

如果使用getJSON方法获取cookie，那么js-cookie会用JSON.parse解析为string并返回。

Cookies.getJSON('name'); // => { username: 'tom' }
Cookies.getJSON(); // => { name: { username: 'tom' } }