js-cookie读写浏览器中的Cookie

简介: js-cookie读写浏览器中的Cookie

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

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 ,那么getremove有需要指定

测试示例

浏览器控制台进行测试

引入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
            </div>
目录
相关文章
|
4月前
|
JSON 前端开发 JavaScript
在JavaScript中,异步编程是一种处理非阻塞操作(如网络请求、文件读写等)的重要技术
【6月更文挑战第12天】JavaScript中的异步编程通过Promise和async/await处理非阻塞操作。Promise管理异步操作的三种状态,防止回调地狱,支持链式调用和并行处理。async/await是ES8引入的语法糖,使异步代码更像同步代码,提高可读性。两者结合使用能更高效地处理复杂异步场景。
35 3
|
5月前
|
JavaScript 前端开发 UED
在 JavaScript 中,异步编程和回调函数是处理非阻塞操作(如网络请求、文件读写等)的重要工具
【5月更文挑战第10天】JavaScript中的异步编程和回调函数用于处理非阻塞操作,提高应用响应性和吞吐量。异步编程通过回调函数、Promises和async/await等方式实现,避免程序因等待操作完成而阻塞。回调函数是异步操作完成后调用的函数,常用于处理网络请求等。然而,回调函数存在嵌套问题和错误处理困难,因此出现了Promises和async/await等更优解决方案。
40 3
|
5月前
|
存储 搜索推荐 安全
Cookie 探秘:了解 Web 浏览器中的小甜饼
Cookie 探秘:了解 Web 浏览器中的小甜饼
|
2月前
|
存储
【Azure APIM】APIM 策略语句如何来设置多个Cookie值让浏览器保存
【Azure APIM】APIM 策略语句如何来设置多个Cookie值让浏览器保存
|
2月前
|
存储 前端开发 JavaScript
揭秘!JavaScript本地存储的四大绝技:从Cookie到IndexedDB,让你的Web应用秒变数据存储高手,轻松应对各种挑战!
【8月更文挑战第4天】JavaScript为核心前端技术,提供多样本地存储方案以优化用户体验与减少服务器负载。首先,Cookie虽用于基本数据如登录状态,但受大小限制及安全性影响。接着,Web Storage中的LocalStorage持久存储不变数据,SessionStorage则限于单次会话。更进一步,IndexedDB作为全面数据库解决方案,支持复杂数据操作但使用较复杂。每种方式根据应用需求各有优势。
46 9
|
3月前
|
存储 Web App开发 JavaScript
浏览器【详解】Cookie(含Cookie的起源,属性,个数和大小限制,作用,优点,缺点,JS 的操作方法等)
浏览器【详解】Cookie(含Cookie的起源,属性,个数和大小限制,作用,优点,缺点,JS 的操作方法等)
113 0
|
3月前
|
存储 Web App开发 移动开发
js【详解】本地存储 Cookie、sessionStorage、localStorage
js【详解】本地存储 Cookie、sessionStorage、localStorage
82 0
|
5月前
|
JavaScript 前端开发
node.js中的fs模块,读写语法讲解
node.js中的fs模块,读写语法讲解
|
4月前
|
JavaScript 前端开发 数据安全/隐私保护
JS中使用Cookie实现记住密码以及设置密码过期时间
JS中使用Cookie实现记住密码以及设置密码过期时间
41 0
|
4月前
|
存储 JavaScript 前端开发
JavaScript如何使用Cookie存值
JavaScript如何使用Cookie存值
24 0