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

Cookie格式

<name>=<value>; <attribute>; <attribute>

eg:
id=a3fWa; Expires=Wed, 21 Oct 2015 07:28:00 GMT; Secure; HttpOnly
1
2
3
4

属性

特殊说明：

1. 如果不添加过期时间，cookie 在浏览器关闭时删除
2. 两个网址只要域名相同和端口相同，就可以共享 Cookie
3. 使用document.cookie无法读取到与HTTPOnly属性的cookie
4. 只能读取到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`.
1
2
3

可以使用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)

1
2
3
4
5
6
7
8
9
10
11
12
13
14

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";

1
2
3
4
5
6
7
8
9
10
11
12
13
14

可以自己封装函数处理cookie
例如：https://www.runoob.com/js/js-cookies.html

也可以使用插件读取
js-cookie: https://www.npmjs.com/package/js-cookie

参考

1. https://segmentfault.com/a/1190000016372516
2. 阮一峰 JavaScript 教程/浏览器模型/Cookie