day17_cookie_webstorage
浏览器中需要有存储数据的技术 从而释放服务端的存储压力
1.cookie
1.1cookie特点
1 存在浏览器中
2 按域(domian 域名) 存储
3 存储键值对 key value 都是字符串
4 cookie有有效期 超过存储的有效期会失效
注意: cookie存在浏览器中 用户可以阻止cookie 也可以删除cookie 所以不要存关键数据
1.2cookie读写操作
通过服务端代码读写
写cookie例子
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;
/*** @className: CookieWriteDemo* @author: gfs* @date: 2025/10/23 9:50* @version: 0.1* @since: jdk17* @description:*/
@WebServlet("/writeDemo")
public class CookieWriteDemo extends HttpServlet {
@Override protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { System.out.println("cookie write......"); Cookie cookie = new Cookie("ckkey", "rose"); //path 设置到根 保证cookie唯一性 //根据key + path 保证唯一性 cookie.setPath("/"); //设置过期时间 //默认有效期 会话 session 关闭浏览器失效 //cookie.setMaxAge(60*60*24); 正整数 按秒算有效期 //cookie.setMaxAge(0); 0 设置cookie失效 //cookie.setMaxAge(-1); -1 恢复默认值 关闭浏览器自动失效 //响应报文中 出现set-cookie 让浏览器写cookie数据 resp.addCookie(cookie);
}
}
读cookie例子
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;
/*** @className: CookieWriteDemo* @author: gfs* @date: 2025/10/23 9:50* @version: 0.1* @since: jdk17* @description:*/
@WebServlet("/readDemo")
public class CookieReadDemo extends HttpServlet {
@Override protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { System.out.println("cookie read......"); Cookie[] cookies = req.getCookies(); //根据报文生成的新的cookie对象 只有key value 其他参数都没有 for(Cookie ck: cookies){ System.out.println(ck.getName()+"---"+ck.getValue()); if("ckkey".equals(ck.getName())){ //同key 同 path ck.setValue("jack"); ck.setPath("/"); resp.addCookie(ck); }
}
}
}
注意: 读+写时 需要通过key+path 保证是同一条cookie1.3cookie与session的区别
session的实现依赖cookie cookie被禁用 session也不能正常使用
/* * 1 访问到服务端时 服务器会判断是否有浏览器的session对象 * 根据cookie中的key JSESSIONID * 2 如果没有 创建一个Session对象 把session存在服务器中 * Map session编号 session对象 会自动写响应头 set-cookie 让浏览器存储 JSESSIONID session编号 * 3 后续访问过程中 如果读到 有JSESSIONID * 根据其中的session编号 从map中找到与之对应的session对象 * * 4 JSESSIONID 有效期是 会话(关闭浏览器 自动清除) * 再次访问时 找不到之前session对象 所以要重新创建 * * */ 1.4js直接操作cookie(了解)
Title <script>
/* * js中以字符串方式 操作cookie * 读写都不太方便 * * */
const setCookie = ()=>{ //赋值 写cookie document.cookie = `jskey=roser123;path=/;expires=${new Date(new Date().getTime()+60*60*24*10*1000) }` } const setCookie2 = ()=>{ //赋值 写cookie document.cookie = `jskey=roser123;path=/;expires=${new Date('1999-11-11 11:11:11')} ` }
const getCookie = ()=>{ //读取到有格式的字符串 如果要操作某个cookie的值 需要手动解析 //test=123321; ckkey=jack; jskey=jsval console.log(document.cookie) //赋值 写cookie // = `jskey=jsval;path=/;expires=${new Date(new Date().getTime()+60*60*24*10*1000) }` console.log(localStorage.getItem("name")) console.log(sessionStorage.name)
console.log(JSON.parse(localStorage.myJson) )
}
</script>
2WebStorage
两个对象
localStorage 无限期长期存储
sessionStorage 关闭浏览器自动失效
1 按域(domain 域名)存储
2 存储键值对 类型字符串
3 读写操作API简单好用
Title
<script>
/* * localStorage 长期存储 * sessionStorage 临时存储 关闭浏览器失效 * * 写操作 * localStorage.name = "abc123" sessionStorage.setItem("name","jack") * * 读操作 * console.log(localStorage.getItem("name")) console.log(sessionStorage.name) * * 删除操作 * localStorage.removeItem("name") 删单个 sessionStorage.clear() 全删 * * 结合json使用 * 需要转成json字符串存取 * //只能放json格式字符串 localStorage.myJson = JSON.stringify({name:'jack',age:15}) //读取时需要json对象 需要做转换 console.log(JSON.parse(localStorage.myJson) ) * * * */
const setStorage = ()=>{ localStorage.name = "abc123" sessionStorage.setItem("name","jack")
} const setCookie2 = ()=>{ localStorage.removeItem("name") sessionStorage.clear() }
const setStorage3 = ()=>{ //只能放json格式字符串 localStorage.myJson = JSON.stringify({name:'jack',age:15}) //读取时需要json对象 需要做转换 console.log(JSON.parse(localStorage.myJson) ) }
const getStorage = ()=>{ console.log(localStorage.getItem("name")) console.log(sessionStorage.name)
console.log(JSON.parse(localStorage.myJson) )
}
</script>
总结:
1如果浏览器存了数据 需要在后端读取 使用cookie
2如果浏览器存了数据 只在前端读写使用(跨页面共享) webStorage
登录 主菜单功能
1 画流程图
2sql分析
建表 创建数据 写sql
-- 粗糙报错 不能登录
select * from admin_user where username = 'wangshaocheng' and `password` = 'abc123' and isvalid = 1
-- 详细报错
select * from admin_user where username = 'wangshaocheng'
-- 其他字段通过java代码检查和匹配 根据匹配结果 报详细的错误信息
-- 登录成功 更新最后登录时间
update admin_user set login_time = NOW() where uid = 3
-- 读取不同用户的菜单信息 需要父子关系
select am2.*, am1.mid as submid,am1.menuname as submenuname,am1.url as suburl
from rel_admin_user_menu rum inner join admin_menu am1 on rum.mid = am1.midinner join admin_menu am2 on am1.pid = am2.mid
where uid = 3