Cookie & Web Storage – neet`s Blog

# 1.cookie

每次请求时可以把cookie自定义的数据传给服务端

(请求参数请求头之外报文传自定义数据的位置 cookie可以长期保存)

cookie特点

“`java
1.数据格式只有字符串
2.按键值对存储
3.对中文支持较差(尽量不要用中文)
4.按照网站(域 domain)存储
5.可以长期存储 (有效期)
6.存储好之后每次访问对应网站时 cookie都会自动发送
“`

# 2.cookie在浏览器中查看和操作

![image-20241128095252272](http://43.155.216.63:21080/wp-content/uploads/2025/12/image-20241128095252272.png

![image-20241128095232094](http://43.155.216.63:21080/wp-content/uploads/2025/12/image-20241128095232094.png

在浏览器中用户可以直接操作cookie

cookie一般存储跟用户本身相关的数据而且是非关键数据

一般不要禁用cookie 禁用之后没法在浏览器缓存数据

# 3.java中读写cookie

java不能直接操作cookie数据需要通过报文操作

请求时浏览器会自动发送存储的cookie数据

![image-20241128114748795](http://43.155.216.63:21080/wp-content/uploads/2025/12/image-20241128114748795.png

响应时通过Set-cookie响应头通知浏览器操作cookie

![image-20241128114826560](http://43.155.216.63:21080/wp-content/uploads/2025/12/image-20241128114826560.png

java中与cookie相关API

“`java
* 写cookie
Cookie cookie = new Cookie("ckkey","ckval333");

设置cookie参数
//直接设置到根 / 防止出现同名cookie
cookie.setPath("/");
//正整数按秒计算过期时间
//0 让cookie失效
//-1 恢复为默认值关闭浏览器自动失效
cookie.setMaxAge(-1);

resp.addCookie(cookie) 响应报文中 set-cookie 让浏览器保存

* 覆盖cookie
cookie的name(key) path 一样
可以修改其他参数

* 删除cookie
cookie.setMaxAge(0); 报文中会传已过期的事件通知浏览器删除

“`

“`java
* cookie读取
* Cookie[] cookies = req.getCookies();
* 遍历cookies 读取cookie
*
* cookie 读+写
* //新创建的cookie对象只有key value 其他参数都是默认值
* Cookie[] cookies = req.getCookies();
* 如果要覆盖cookie 必须保证同key 同path
* if("ckkey".equals(name) ){
ck.setValue("newvalue");
ck.setPath("/");
ck.setMaxAge(60*60*24*30);
resp.addCookie(ck);
}
“`

写cookie代码:

“`java
package com.javasm.controller;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.Cookie;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;

/**
* @author gfs
* @version 0.1
* @className CookieDemo1
* @descriptioin:
* @date 2024/11/28 10:00
* @since jdk11
*/
@WebServlet("/demo1")
public class CookieDemo1 extends HttpServlet {

Cookie cookie = new Cookie("ckkey","ckval333");
//直接设置到根 / 防止出现同名cookie
cookie.setPath("/");
//正整数按秒计算过期时间
//0 让cookie失效
//-1 恢复为默认值关闭浏览器自动失效
cookie.setMaxAge(-1);
//通过响应对象通知浏览器存储cookie
//生成响应头 Set-Cookie: ckkey=ckval
resp.addCookie(cookie);

}
}

“`

读cookie代码:

“`java
package com.javasm.controller;

/**
* @author gfs
* @version 0.1
* @className CookieDemo1
* @descriptioin:
* @date 2024/11/28 10:00
* @since jdk11
*/
@WebServlet("/demo2")
public class CookieDemo2 extends HttpServlet {

@Override
protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
/*
* 写cookie
* Cookie cookie = new Cookie("ckkey","ckval333");
* 设置cookie参数
* resp.addCookie(cookie) 响应报文中 set-cookie 让浏览器保存
*
* 覆盖cookie
* cookie的name(key) path 一样
* 可以修改其他参数
*
* 删除cookie
* cookie.setMaxAge(0); 报文中会传已过期的事件通知浏览器删除
*
*
* cookie读取
* Cookie[] cookies = req.getCookies();
* 遍历cookies 读取cookie
*
* cookie 读+写
* //新创建的cookie对象只有key value 其他参数都是默认值
* Cookie[] cookies = req.getCookies();
* 如果要覆盖cookie 必须保证同key 同path
* if("ckkey".equals(name) ){
ck.setValue("newvalue");
ck.setPath("/");
ck.setMaxAge(60*60*24*30);
resp.addCookie(ck);
}
*
*
* cookie笔试题
* cookie与session的区别
*
* cookie与session的关系
//同一个浏览器多次访问时使用的同一个session对象
//1session是怎么存的 Map存储
//2session怎么识别编号 tomcat会创建一条cookie session编号让浏览器保存
//3每次请求时 tocmat读取指定的cookie的key 从而找到浏览器对应的cookie对象
//session 实现依赖 cookie 通过编号查找后端的共享数据
*
*
*
* */
Cookie[] cookies = req.getCookies();
for(Cookie ck:cookies){
//根据当次请求报文新创建的cookie对象
String name = ck.getName();
String value = ck.getValue();
System.out.println(name+”—“+value);
if(“ckkey”.equals(name) ){
ck.setValue(“newvalue”);
ck.setPath(“/”);
ck.setMaxAge(60*60*24*30);
resp.addCookie(ck);
}
}
}
}

“`

# 4.cookie与session的关系

session依赖cookie 如果禁用cookie session无法使用

“`java
package com.javasm.controller;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;
import java.io.IOException;

/**
* @author gfs
* @version 0.1
* @className CookieAndSession
* @descriptioin:
* @date 2024/11/28 10:39
* @since jdk11
*/
@WebServlet(“/cookieSession”)
public class CookieAndSession extends HttpServlet {
@Override
protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
HttpSession session = req.getSession();
//服务会对浏览器应用建立对应的session对象
//同一个浏览器多次访问时使用的同一个session对象
//1session是怎么存的 Map存储
//2session怎么识别编号 tomcat会创建一条cookie session编号让浏览器保存
//3每次请求时 tocmat读取指定的cookie的key 从而找到浏览器对应的cookie对象
//session 实现依赖 cookie 通过编号查找后端的共享数据
System.out.println(session.getId());

}
}

“`

# 5.js中读写cookie

js可以直接操作cookie 如果不向后端传递的情况可以用作跨页面共享数据

js操作cookieAPI

“`java
* 写cookie
* document.cookie =
“jskey=jsval2;path=/;expires=”+new Date(‘2024/12/15 12:12:12’);
* 覆盖cookie
* 保证同key 同path
* 删除
* document.cookie = “jskey=jsval2;path=/;expires=”+new Date(过期时间);

* 读取cookie
* console.log(document.cookie)
* ckkey=newvalue; 3333=4444; 4444=55555; ckkey=newvalue
*
* 读+写
* document.cookie.split(“; “).forEach(data=>{
//console.log(data);
let kvarr = data.split(“=”);
if(“3333” == kvarr[0]){
let newNum = parseInt(kvarr[1])+1
document.cookie = `3333=${newNum};path=/;
expires=`+new Date(‘2024/12/15 12:12:12’);
}
})
*
“`

“`js

Title

“`

# 6.webStorage

webStorage在html5版本时添加的前端共享数据的技术(跨页面共享数据)

两个对象 API操作相同

sessionStorage 会话存储关闭浏览器自动清除

localStorage 本地存储长期有效

特征:

“`js
* 1.存储键值对
* 2.数据格式字符串
* 3.按域存储
* 4.key唯一
“`

API操作

“`js
写
sessionStorage.新key = ‘值’
sessionStorage.setItem(‘新key’,’值’);

删除
sessionStorage.removeItem(‘key’)
sessionStorage.clear() 全部清除

读取
sessionStorage.name 读不到 undefined
sessionStorage.getItem(‘addr’) 读不到 null
“`

示例:

“`html

Title

“`

# 7.cookie与storage对比

“`java
* cookie 前后端数据交互
* 纯前端共享数据(跨页面共享数据) api使用麻烦
* 自动拼入请求报文向服务端发送
*
* storage 跨页面共享数据
* 纯前端共享数据(跨页面共享数据) api简单
* 不自带发送功能可以手动发送
*
*
* 都可以结合json使用需要转格式 cookie storage 值都是字符串
“`

# 8购物车场景

使用偏后端处理策略

![image-20241128170522674](http://43.155.216.63:21080/wp-content/uploads/2025/12/image-20241128170522674.png

发送评论 编辑评论

发送评论编辑评论