day17_cookie_webstorage - 详解

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 保证是同一条cookie

1.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(了解)

         写cookie   删除cookie   读cookie<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简单好用

      写storage
​
删除cookie
storage里使用json
读storage<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