js在浏览器中对cookie进行增删改查

简介: js在浏览器中对cookie进行增删改查

ookie格式

<name>=<value>; <attribute>; <attribute>
eg:
id=a3fWa; Expires=Wed, 21 Oct 2015 07:28:00 GMT; Secure; HttpOnly

属性

image.png

特殊说明:


如果不添加过期时间,cookie 在浏览器关闭时删除

两个网址只要域名相同和端口相同,就可以共享 Cookie

使用document.cookie无法读取到与HTTPOnly属性的cookie

只能读取到cookie的键-值,没有办法读取属性的值

Cookie读写操作

如果本地html文件用浏览器打开页面会报错


A cookie associated with a cross-site resource at  was set without the `SameSite` attribute. 
A future release of Chrome will only deliver cookies with cross-site requests 
if they are set with `SameSite=None` and `Secure`.

可以使用Flask 搭建测试环境


# -*- coding: utf-8 -*-
from flask import Flask, send_file
app = Flask(__name__)
@app.route("/")
def get_info():
    return send_file("templates/index.html")
if __name__ == '__main__':
    app.run(debug=True)

JavaScript读写Cookie


// 创建Cookie 可以连续赋值,不会被覆盖
document.cookie="username=Tom";
document.cookie="age=12";
// 修改Cookie
document.cookie="username=Jack";
// 获取Cookie
console.log(document.cookie);
// age=12; username=Jack
// 删除  设置 expires 参数为以前的时间
document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 GMT";

可以自己封装函数处理cookie

例如:https://www.runoob.com/js/js-cookies.html


也可以使用插件读取

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

相关文章
|
22天前
|
JavaScript
浏览器插件crx文件--JS混淆与解密
浏览器插件crx文件--JS混淆与解密
21 0
|
23天前
|
JavaScript 前端开发 安全
JavaScript与浏览器的执行平台有何不同?
【4月更文挑战第22天】JavaScript与浏览器的执行平台有何不同?
23 2
|
23天前
|
存储 移动开发 JavaScript
JavaScript和浏览器
【4月更文挑战第22天】JavaScript和浏览器
22 4
|
8天前
|
移动开发 JavaScript 前端开发
javascript监听浏览器离开、进入行为
javascript监听浏览器离开、进入行为
13 0
|
10天前
|
JavaScript 前端开发 开发者
JavaScript基础入门之浏览器控制台调试输出
本文章是对小白学习js的初级教程,也是我对自己学习经验的一种总结,文章大多采用使用案例加讲解,带动学习的方式.因为我们的天性总是喜欢有及时反馈的事物,但是学习是一个慢长的事情,而有结果的回应,才会更好的促进自己去学习,主要是对于javascript学习中的输出,有个大体上的了解,同时通过教学能够更好的使用浏览器来方便我们去学习和运行代码,也是对自己进行笔记整理,对抓住信息关键点的一种提高.
|
26天前
|
JavaScript 前端开发
JavaScript如何获得浏览器的宽高
JavaScript如何获得浏览器的宽高
|
26天前
|
JavaScript 前端开发
JavaScript BOM 浏览器对象模型
JavaScript BOM 浏览器对象模型
|
28天前
|
存储 JavaScript 前端开发
JavaScript中的cookie、localStorage的区别和特点
JavaScript中的cookie、localStorage的区别和特点
19 6
|
28天前
|
JavaScript 安全 前端开发
js控制浏览器前进、后退、页面跳转
js控制浏览器前进、后退、页面跳转
21 3
|
1月前
|
JavaScript 前端开发 UED
JS:如何获取浏览器窗口尺寸?
JS:如何获取浏览器窗口尺寸?
49 1