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

文章来源: pengshiyu.blog.csdn.net，作者：彭世瑜，版权归原作者所有，如需转载，请联系作者。

原文链接：pengshiyu.blog.csdn.net/article/details/102935023