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' } }