【HTML】操作cookie

Cookie在浏览器中的存储方式

参考：https://developer.mozilla.org/en-US/docs/Web/HTTP/Cookies

下发和上传

服务器通过Set-Cookie下发Cookie

HTTP/2.0 200 OK
Content-Type: text/html
Set-Cookie: yummy_cookie=choco
Set-Cookie: tasty_cookie=strawberry

[page content]

然后，客户端通过Cookie表明使用Cookie

GET /sample_page.html HTTP/2.0
Host: www.example.org
Cookie: yummy_cookie=choco; tasty_cookie=strawberry

js脚本通过document.cookie访问：

document.cookie = "yummy_cookie=choco"; 
document.cookie = "tasty_cookie=strawberry"; 
console.log(document.cookie); 
// logs "yummy_cookie=choco; tasty_cookie=strawberry"

时效

Cookie的声明周期分为两种，1.服务器显式指定的过期时间 2.服务器未指定过期时间，由浏览器决定何时结束Cookie的有效期，有的浏览器可能在关闭之后清除，有的浏览器则可能启动后进行恢复

指定过期时间：

Set-Cookie: id=a3fWa; Expires=Thu, 31 Oct 2021 07:28:00 GMT;

使用js-cookie库

<script src="https://cdn.jsdelivr.net/npm/js-cookie@rc/dist/js.cookie.min.js"></script>

使用
Create a cookie, valid across the entire site:

Cookies.set('name', 'value')  // set

Cookies.set('name', 'value', { expires: 7 })

Cookies.set('name', 'value', { expires: 7, path: '' })

Cookies.get('name') // => 'value'
Cookies.get('nothing') // => undefined

Cookies.get() // => { name: 'value' }