day17_cookie_webstorage

浏览器中需要有存储数据的技术从而释放服务端的存储压力

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<String    ,   HttpSession>
                session编号    session对象
            会自动写响应头 set-cookie 让浏览器存储 JSESSIONID session编号
        * 3 后续访问过程中 如果读到 有JSESSIONID
        *   根据其中的session编号 从map中找到与之对应的session对象
        *
        * 4 JSESSIONID 有效期是 会话(关闭浏览器 自动清除)
        *   再次访问时 找不到之前session对象 所以要重新创建
        *
        * */

1.4js直接操作cookie(了解)

复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <button onclick="setCookie()">写cookie</button>
    <button onclick="setCookie2()">删除cookie</button>
    <button onclick="getCookie()">读cookie</button>
</body>
<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>
</html>

2WebStorage

两个对象

localStorage 无限期长期存储

sessionStorage 关闭浏览器自动失效

1 按域(domain 域名)存储

2 存储键值对类型字符串

3 读写操作API简单好用

复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<button onclick="setStorage()">写storage</button>

<button onclick="setCookie2()">删除cookie</button>
<button onclick="setStorage3()">storage里使用json</button>
<button onclick="getStorage()">读storage</button>
</body>
<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>
</html>

总结:

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.mid
                                                         inner join admin_menu am2  on am1.pid = am2.mid

where uid = 3

day17_cookie_webstorage

day17_cookie_webstorage

1.cookie

1.1cookie特点

1.2cookie读写操作

通过服务端代码读写

1.3cookie与session的区别

1.4js直接操作cookie(了解)

2WebStorage

登录 主菜单功能

1 画流程图

2sql分析

登录主菜单功能