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>
目录
相关文章
|
11天前
|
JavaScript
浏览器插件crx文件--JS混淆与解密
浏览器插件crx文件--JS混淆与解密
16 0
|
1月前
|
JavaScript 前端开发 UED
JS:如何获取浏览器窗口尺寸?
JS:如何获取浏览器窗口尺寸?
38 1
|
15天前
|
JavaScript 前端开发
JavaScript如何获得浏览器的宽高
JavaScript如何获得浏览器的宽高
|
16天前
|
JavaScript 安全 前端开发
js控制浏览器前进、后退、页面跳转
js控制浏览器前进、后退、页面跳转
21 3
|
16天前
|
JavaScript 前端开发
js如何获得浏览器的宽高
js如何获得浏览器的宽高
21 5
|
16天前
|
Web App开发
允许浏览器cookie策略处理
允许浏览器cookie策略处理
14 0
|
18天前
|
JavaScript 前端开发 安全
JavaScript DOM 操作:解释一下浏览器的同源策略。
**同源策略**是浏览器安全基石,它阻止脚本跨不同协议、域名或端口访问资源,防止恶意行为。例如,HTTP页面无法直接用JS获取HTTPS页面内容。**CORS**允许跨域请求,但需服务器配合设置,通过`document.domain`属性可配置,但仍受限于服务器配置。
16 4
|
18天前
|
JavaScript 前端开发
JavaScript DOM 操作:如何检测浏览器是否支持某个特性?
【4月更文挑战第15天】使用Modernizr库检测浏览器特性:添加 `<script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js"></script>` 到HTML,然后通过 `Modernizr.localstorage` 进行检测,如支持localStorage则执行相应代码,否则执行备用逻辑。
15 0
|
19天前
|
监控 前端开发 JavaScript
如何在浏览器中使用javaScript进行代码调试
【4月更文挑战第11天】在浏览器中调试JavaScript是前端开发的关键技能。使用开发者工具(可通过F12、右键检查或菜单栏访问),遵循以下步骤:1) 打开Sources标签页查看所有脚本;2) 设置断点在需要暂停的代码行;3) 刷新页面触发断点;4) 利用调试工具如Scopes、Watch、Call Stack等检查代码状态;5) 使用Console辅助调试;6) 利用其他工具如Network、Performance和Memory进行性能分析。确保使用最新工具,保持代码清晰,以提升调试效率。
41 4
|
25天前
|
JavaScript
【归总】原生js操作浏览器hash、url参数参数获取/修改方法合集
【归总】原生js操作浏览器hash、url参数参数获取/修改方法合集