Java体系知识之Cookie&Web Storage

 (1)Cookie在Java中使用
 (2)Cookie在JS中使用
 (3)Web Storage  了解
 (4)综合案例-购物车

1 Cookie

1.1 HTTP协议

 (1)超文本传输协议，请求-响应的协议
 (2)无状态协议：
     浏览器    服务器
     
     服务器端：
         只关心请求；
         即使这个客户端已访问过服务端了，服务端也不知道
         
 (3)追踪用户访问情况：
     会话追踪技术：
         cookie：
             cookie，客户端保存数据；
             数据不安全；
             服务器压力小；
             建议存储简单|不重要的|少量的|英文格式的数据
             
         session：
             session，服务器端保存数据；sessionId，保存到客户端Cookie中；
             数据安全；
             服务器压力大；
             
         典型面试题：cookie和session区别
         
         隐藏框：type="hidden"
         URL后面拼接参数

1.2 Cookie简介

 (1)一小段文本信息
 (2)保存在客户端
 (3)键值对形式存储，键值对都是字符串
 (4)当访问网站时，本地Cookie中的数据会随着请求一块发送到服务端
 (5)Cookie中的数据：可增|可删|可修改
     数据不安全，建议存储简单|不重要的|少量的|英文格式的数据

1.3 Java中使用Cookie

1.3.1 WriteCookieServlet

 package com.javasm.basic;
 
 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;
 import java.io.PrintWriter;
 
 /**
  * @author: ShangMa
  * @className: WriteCookieServlet
  * @description: 写出Cookie
  * @date: 2022/8/25 11:34
  */
 @WebServlet("/write")
 public class WriteCookieServlet extends HttpServlet {
     @Override
     protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
         /**
          * 创建Cookie对象：
          *  Cookie(String name, String value)
          */
         Cookie cookie = new Cookie("myName","tom");
         /**
          * setPath()：
          *  设置路径值；
          * 不同path，会出现同name的Cookie；
          * 同path，同name，覆盖value值
          */
         cookie.setPath("/");
         /**
          * setMaxAge()：
          *  设置过期时间，单位是秒
          *
          *  正数：多久之后过期
          *  负数：显示为Session，浏览器关闭时失效
          *  0：删除Cookie信息
          *
          */
         cookie.setMaxAge(24*60*60);
         // cookie.setMaxAge(0);
         /**
          * 向客户端设置Cookie
          */
         resp.addCookie(cookie);
         /**
          * 输出流写出响应内容
          */
         resp.setContentType("text/html;charset=utf-8");
         PrintWriter writer = resp.getWriter();
         writer.print("写出Cookie成功");
         writer.flush();
         writer.close();
     }
 }

1.3.2 ReadCookieServlet

 package com.javasm.basic;
 
 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;
 import java.io.PrintWriter;
 
 /**
  * @author: ShangMa
  * @className: ReadCookieServlet
  * @description: 读取Cookie信息
  * @date: 2022/8/25 11:35
  */
 @WebServlet("/read")
 public class ReadCookieServlet extends HttpServlet {
     @Override
     protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
         /**
          * 读取客户端发过来的Cookie数据
          */
         Cookie[] cookies = req.getCookies();
         for (Cookie cookie:cookies) {
             System.out.println(cookie.getName()+" "+cookie.getValue());
             /**
              * 修改Cookie的value值：
              * tom->jack
              *
              * 同path，同name，替换value值
              */
             // 判断
             if("myName".equals(cookie.getName())){
                 cookie.setValue("jack");
                 cookie.setPath("/");
                 cookie.setMaxAge(60*60);
                 resp.addCookie(cookie);
             }
         }
         /**
          * 输出流写出响应内容
          */
         resp.setContentType("text/html;charset=utf-8");
         PrintWriter writer = resp.getWriter();
         writer.print("写出Cookie成功");
         writer.flush();
         writer.close();
     }
 }

1.4 JS中使用Cookie

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>Title</title>
 </head>
 <body>
 <input type="button" value="增加" onclick="addCookie()">
 <input type="button" value="读取" onclick="readCookie()">
 <input type="button" value="删除" onclick="delCookie()">
 
 </body>
 <script>
     /*增加Cookie数据*/
     function addCookie() {
         /**
          * key=val;path=/;expires=?
          *
          * 同path，同name，替换value值
          */
         document.cookie = "address=sd;path=/;expires=" + new Date("2024-08-25 18:45:24");
     }
 
     /*读取Cookie数据*/
     function readCookie() {
         // myAge=18; myName=jack; address=sd
         console.log(document.cookie);
         // 修改年龄值  18->增加1
         var strings = document.cookie.split("; ");
         strings.forEach(cookie => {
             // myAge=18|myName=jack|address=sd|...
             console.log(cookie);
             // 判断
             var keyAndVal = cookie.split("=");
             if ("myAge" == keyAndVal[0]) {
                 var newAge = parseInt(keyAndVal[1]) + 1;
                 console.log(newAge);
                 document.cookie = keyAndVal[0] + "=" + newAge + ";path=/;expires=" + new Date("2024-08-25 18:45:24");
             }
         })
     }
 
     /*删除Cookie数据*/
     function delCookie() {
         // 同path同name，设置过期时间
         document.cookie = "address=sd;path=/;expires=" + new Date("2014-08-25 18:45:24");
     }
 </script>
 </html>

2 Web Storage

2.1 技术简介

 (1)Web Storage：
     客户端本地保存数据，数据不会主动随着请求发送到服务端
 (2)存储数据：
     localStorage：没有时间限制
     sessionStorage：浏览器关闭，自动失效
 (3)方法：
     增加：
         xx.setItem(key,val)
         xx.key=val
     获取：
         xx.getItem(key)
         xx.key
     删除：
         xx.removeItem(key)  有条件移除值
         xx.clear()          清除所有值
 (4)了解

2.2 案例实现

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>Title</title>
 </head>
 <body>
 <input type="button" value="增加" onclick="add()">
 <input type="button" value="读取" onclick="read()">
 <input type="button" value="删除" onclick="del()">
 
 </body>
 <script>
     /*增加数据*/
     function add() {
         /**
          * 增加：
          * localStorage：
          *  .setItem(key,val)
          *  .key=val
          *
          * sessionStorage同localStorage
          */
         sessionStorage.setItem("id", "1");
         sessionStorage.name = "tom";
     }
 
     function read(){
         /**
          * 读取：
          *  localStorage.getItem(key)
          *  localStorage.key
          *
          *  sessionStorage同localStorage
          *
          */
         console.log(localStorage.getItem("id"))
         console.log(localStorage.id);
         console.log(sessionStorage.name);
         console.log(sessionStorage.getItem("name"));
     }
 
     /*删除*/
     function del(){
         /**
          * 删除：
          *  localStorage.removeItem(key)   有条件移除值
          *  localStorage.clear()           清除所有值
          *
          *  sessionStorage同localStorage
          */
         // 有条件移除值
         localStorage.removeItem("id");
         // 清空
         // localStorage.clear();
         sessionStorage.clear();
     }
 </script>
 </html>

3 综合案例

3.1 案例分析

 (1)购物车案例：
     进入产品界面->将指定产品添加到购物车->进入购物车界面看到数据
 (2)流程：
     A.进入产品界面：呈现产品数据
         prod.html->ProdServlet->ProdService->ProdDao
         ProdServlet->prod.html
     B.将指定产品添加到购物车：将产品数据保存到Cookie中
         prod.html
         document.cookie
     C.进入购物车界面看到数据：呈现加入购物车的产品数据
         读取Cookie中的数据
         CartServlet->ProdService->ProdDao
         CartServlet->cart.html
 (3)技术：
     Vue+Axios+qs+Servlet
 (4)数据表：
     t_prod：
         prod_id      产品编号
         prod_name    产品名称
         prod_img     产品图片
         prod_price   产品价格
         prod_desc    产品描述

3.2 案例实现

3.2.1 持久层

3.2.1.1 ProdDao

 package com.javasm.dao;
 
 import com.javasm.entity.Prod;
 
 import java.sql.SQLException;
 import java.util.List;
 
 /**
  * @author: ShangMa
  * @className: ProdDao
  * @description: 持久层接口-产品
  * @date: 2022/8/25 16:41
  */
 public interface ProdDao {
 
     /**
      * 查询所有的产品数据
      *
      * @return
      */
     List<Prod> findProdList() throws SQLException;
 
 }

3.2.1.2 ProdDaoImpl

 package com.javasm.dao.impl;
 
 import com.javasm.dao.ProdDao;
 import com.javasm.entity.Prod;
 import com.javasm.util.DBUtils;
 import org.apache.commons.dbutils.BasicRowProcessor;
 import org.apache.commons.dbutils.GenerousBeanProcessor;
 import org.apache.commons.dbutils.QueryRunner;
 import org.apache.commons.dbutils.handlers.BeanListHandler;
 
 import java.sql.Connection;
 import java.sql.SQLException;
 import java.util.List;
 
 /**
  * @author: ShangMa
  * @className: ProdDaoImpl
  * @description: 持久层实现类-产品
  * @date: 2022/8/25 16:42
  */
 public class ProdDaoImpl implements ProdDao {
     QueryRunner runner = new QueryRunner();
 
     @Override
     public List<Prod> findProdList() throws SQLException {
         Connection conn = DBUtils.getConn();
         String sql = "select prod_id,prod_name,prod_img,prod_price,prod_desc from t_prod";
         BeanListHandler<Prod> listHandler = new BeanListHandler<>(Prod.class, new BasicRowProcessor(new GenerousBeanProcessor()));
         List<Prod> prodList = runner.query(conn, sql, listHandler);
         DBUtils.getClose(conn, null, null, null);
         return prodList;
     }
 }

3.2.2 业务层

3.2.2.1 ProdService

package com.javasm.service;

import com.javasm.entity.Prod;

import java.util.List;

/**
 * @author: ShangMa
 * @className: ProdService
 * @description:业务层接口-产品
 * @date: 2022/8/25 16:41
 */
public interface ProdService {
    /**
     * 查询所有的产品数据
     *
     * @return
     */
    List<Prod> findProdList();
}

3.2.2.2 ProdServiceImpl

package com.javasm.service.impl;

import com.javasm.dao.ProdDao;
import com.javasm.dao.impl.ProdDaoImpl;
import com.javasm.entity.Prod;
import com.javasm.service.ProdService;

import java.sql.SQLException;
import java.util.List;

/**
 * @author: ShangMa
 * @className: ProdServiceImpl
 * @description: 业务层实现类-产品
 * @date: 2022/8/25 16:41
 */
public class ProdServiceImpl implements ProdService {
    ProdDao prodDao = new ProdDaoImpl();

    @Override
    public List<Prod> findProdList() {
        List<Prod> prodList = null;
        try {
            prodList = prodDao.findProdList();
        } catch (SQLException e) {
            throw new RuntimeException(e);
        }
        return prodList;
    }
}

3.2.3 控制层

3.2.3.1 ProdServlet

package com.javasm.servlet;

import com.alibaba.fastjson.JSON;
import com.javasm.entity.CodeAndMsg;
import com.javasm.entity.Prod;
import com.javasm.entity.ReturnEntity;
import com.javasm.service.ProdService;
import com.javasm.service.impl.ProdServiceImpl;

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 java.io.IOException;
import java.io.PrintWriter;
import java.util.List;

/**
 * @author: ShangMa
 * @className: ProdServlet
 * @description: 控制层-产品
 * @date: 2022/8/25 16:41
 */
@WebServlet("/prod")
public class ProdServlet extends HttpServlet {
    @Override
    protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        ProdService prodService = new ProdServiceImpl();
        List<Prod> prodList = prodService.findProdList();
        // 返回响应数据
        ReturnEntity re = new ReturnEntity();
        if (prodList.size() > 0) {
            re.setReturnCode(CodeAndMsg.DATA_SUCCESS.getReturnCode());
            re.setReturnMsg(CodeAndMsg.DATA_SUCCESS.getReturnMsg());
            re.setReturnData(prodList);
        } else {
            re.setReturnCode(CodeAndMsg.DATA_FAILURE.getReturnCode());
            re.setReturnMsg(CodeAndMsg.DATA_FAILURE.getReturnMsg());
        }
        resp.setContentType("application/json;charset=utf-8");
        PrintWriter writer = resp.getWriter();
        writer.print(JSON.toJSONString(re));
        writer.flush();
        writer.close();
    }
}

3.2.4 prod.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--Vue.js文件-->
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <!--引入axios的库文件-->
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <style>
        .prod-table {
            margin: 10px auto;
        }

        table, td, th {
            border: 1px solid black;
        }

        img {
            width: 10%;
        }

        td {
            text-align: center;
        }
    </style>
</head>
<body>
<div id="root">
    <table class="prod-table">
        <caption>产品模块</caption>
        <tr>
            <th>产品编号</th>
            <th>产品名称</th>
            <th>产品价格</th>
            <th>产品描述</th>
            <th>产品操作</th>
        </tr>
        <tr v-for="prod in prodList">
            <td>{{prod.prodId}}</td>
            <td>
                <img :src="'/'+prod.prodImg">
                <br>
                {{prod.prodName}}
            </td>
            <td>{{prod.prodPrice}}</td>
            <td>{{prod.prodDesc}}</td>
            <td>
                <input type="button" value="添加购物车" @click="addCart()">
            </td>
        </tr>
    </table>
</div>
</body>
<script>
    new Vue({
        el: "#root",
        data: {
            prodList: []
        },
        methods: {
            /*将数据添加到购物车*/
            addCart() {

            }
        },
        mounted() {
            /*获取产品数据*/
            axios.post("/prod", "")
                .then(resp => {
                    console.log(resp);
                    this.prodList = resp.data.returnData;
                })
                .catch();
        }
    })
</script>
</html>