js-cookie读写浏览器中的Cookie及其应用

文档：

https://www.npmjs.com/package/js-cookie

安装

CDN

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

npm

npm install js-cookie --save

示例

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")
undefinedCookies.remove("name", {path:"/", domain: "www.demo.com"})
undefinedCookies.remove("name", {path:"/", domain: "demo.com"})
undefined

因为Cookies是基于document.cookie的

document.cookie只有两个操作

// 写(设置和删除)：
document.cookie = value// 读(只能读取key=value，没有属性)：
value = document.cookie

应用

在前端项目中，将登录凭证token 保存到本地，并设置过期时间

token.js

import Cookies from 'js-cookie'const TOKEN_KEY = 'token'
const EXPIRES_DAY = 7; // 有效期 天// 获取token
export function getToken() {return Cookies.get(TOKEN_KEY)
}// 设置token
export function setToken(token) {let options = {expires: EXPIRES_DAY,};return Cookies.set(TOKEN_KEY, token, options)
}// 移除token
export function removeToken() {return Cookies.remove(TOKEN_KEY)
}

js-cookie读写浏览器中的Cookie及其应用相关推荐

android 浏览器 cookie,从Android的浏览器中传递cookie数据到App中
从Android的浏览器中传递cookie数据到App中蒋彪@南京 2013-4-19 1. 需求客户有一个需求, 在Android的浏览器上登录一个site, login之后,会在本地co ...
微信内置浏览器中的cookie很诡异呀
微信内置浏览器中的cookie很诡异呀这是设置和删除COOKIE的代码 function set_cookie($var ,$value = '' ,$expire = 0){ $path = '/ ...
cookie的细节——1.一次可不可以发送多个cookie?2. cookie在浏览器中保存多长时间？3. cookie能不能存中文？4. cookie共享问题？
cookie的细节 1. 一次可不可以发送多个cookie? * 可以 * 可以创建多个Cookie对象,使用response调用多次addCookie方法发送cookie即可. 2. ...
php微信浏览器清空cookie,微信内置浏览器中的cookie很诡异呀
微信内置浏览器中的cookie很诡异呀这是设置和删除COOKIE的代码 function set_cookie($var ,$value = '' ,$expire = 0){ $path = '/ ...
微信php 客户端cookie,微信内置浏览器中的cookie很诡异呀
微信内置浏览器中的cookie很诡异呀这是设置和删除COOKIE的代码 function set_cookie($var ,$value = '' ,$expire = 0){ $path = '/ ...
js在浏览器中对cookie进行增删改查
Cookie格式 <name>=<value>; <attribute>; <attribute>eg: id=a3fWa; Expires=Wed, ...
ajax请求头cookies中传递sid,跨域请求单点登录，登录成功，但是在controller中获取的cookie与浏览器中不一致，请大神指点一二。^_^...
跨域请求js代码: $.ajax({ type:"post", async:false, contentType : "application/x-www-form-ur ...
如何在Chrome浏览器中关闭cookie
1 2 3 4 5 6 分步阅读 Cookie就是当浏览一些网站时,这些网站会在你的计算机上留下小文本文件来存储信息,用来记录你的用户ID,密码.下次再访问这个站点时就可以不用手动去输入用户名和密码来 ...
java cookie过期_Java中Servlet Cookie设置过期时间（expires,max-age）
Java中Servlet Cookie设置过期时间(expires,max-age) expires或者max-age指定了coolie的生存期,默认情况下coolie是暂时存在的,他们存储的值只在浏 ...

js-cookie读写浏览器中的Cookie及其应用

安装

示例

测试示例

应用

js-cookie读写浏览器中的Cookie及其应用相关推荐

最新文章

热门文章