JavaWeb的服务器与客户端的储存

本文详细讲解了session的概念、与窗口的关系,cookie的工作原理、查看方法,以及它们的区别。重点介绍了如何利用cookie实现七天免登录功能,并展示了登录界面、处理代码及历史记录、session清空和鉴权的示例。

 这里所有的界面都基于我的前几篇博客的代码,大家需要仔细的阅读。

目录

一、session

1.概念

2.常用方法

3.session与窗口的关系

二、cookie

1.概念

2.常用方法

3.如何查看cookie

4.cookie乱码 

三、session和cookie的区别

四、七天免登录(cookie储存)

登录界面代码

登录处理代码

五、历史记录

阅读页面

历史记录页面

六、session的清空与鉴权

session的清空

session的鉴权

修改后的主界面


一、session

1.概念

Session在网络中被称为会话。由于HTTP协议(超文本传输协议)是一种无状态协议,也就是当一个客户向服务器发出请求,服务器接收请求,并返回响应后,该连接就结束了,而服务器并不保存相关的信息。

2.常用方法

3.session与窗口的关系

问:一个session对应一个窗口,那么通过超链接打开的窗口是否也是新的session呢?

答:每个session对象都与浏览器一一对应,重新开启一个浏览器,相当于重新创建一个session对象重新开启一个IE窗口,直接访问系统首页面 通过超链接打开的新窗口,新窗口的session与其父窗口的session相同

二、cookie

1.概念

Cookie的中文意思是“小甜饼”,然而在互联网上的意思与这就完全不同了。它和食品完全没有关系。在互联网中,Cookie是小段的文本信息,在网络服务器上生成,并发送给浏览器。通过使用cookie可以标识用户身份,记录用户名和密码,跟踪重复用户等。浏览器将cookie以key/value的形式保存到客户机的某个指定目录中。

2.常用方法

3.如何查看cookie

右键鼠标点击检查

点击应用(Application) 

 

在左边可以看到Cookie 

 

4.cookie乱码 

【放进入之前进行编码】
String username1 = URLEncoder.encode(username, "utf-8");

【取值的时候进行解码】
String username1 = URLDecoder.decode(cookies[i].getValue(),"utf-8"); 

三、session和cookie的区别

1. session是在服务器端保存用户信息,Cookie是在客户端保存用户信息

2. session中保存的是对象,Cookie保存的是字符串

3. session随会话结束而关闭,Cookie可以长期保存在客户端

4. Cookie通常用于保存不重要的用户信息,重要的信息使用session保存

四、七天免登录(cookie储存)

登录界面代码

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <meta content="width=device-width, initial-scale=1" name="viewport">
    <link href="${pageContext.request.contextPath}/bootstrap-3.3.7-dist/css/bootstrap.css" rel="stylesheet">
    <script src="${pageContext.request.contextPath}/bootstrap-3.3.7-dist/js/jquery-3.5.1.js"></script>
    <script src="${pageContext.request.contextPath}/bootstrap-3.3.7-dist/js/bootstrap.js"></script>
    <style>
        * {
            outline: none !important;
        }

        html,
        body {
            background: #1abe9c;
        }

        form {
            width: 300px;
            background: #ebeff2;
            box-shadow: 0px 0px 50px rgba(0, 0, 0, .5);
            border-radius: 5px;
            padding: 20px;
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
        }

        .btn-group {
            width: 100%;
        }

        .btn-group button {
            width: 50%;
        }
    </style>
</head>
<%
	String yh="";
	String mm="";
	if(request.getCookies()!=null)
		for(Cookie cookie:request.getCookies()){
			if(cookie.getName().equals("yh")){
				yh=cookie.getValue();
			}
			if(cookie.getName().equals("mm")){
				mm=cookie.getValue();
			}
		}
%>
<body>
<form action="doLogin.jsp" method="post" id="myForm">
    <h3 class="text-center">欢迎使用🐖币新闻管理</h3>
    <div class="form-group">
        <input value=<%=yh %> class="form-control" id="username" name="yh" placeholder="请输入您的邮箱" type="text">
    </div>
    <div class="form-group">
        <input value=<%=mm %> class="form-control" id="password" name="mm" placeholder="请输入您的密码" type="password">
    </div>
    <div class="btn-group">
        <button class="btn btn-primary" type="submit">登录</button>
        <button class="btn btn-danger" onclick='location=href="regiest.html"' type="button">没有账号?</button>
    </div>
</form>
<script>

	$("#myForm").submit(()=>{
		if($("#username").val().length==0){
			alert("用户名不能不填")
			return false //不提交的
		}
		if($("#password").val().length==0){
			alert("密码不能不填")
			return false //不提交的
		}
		return true
	})

</script>
</body>
</html>

登录处理代码

<%@page import="java.sql.ResultSet"%>
<%@page import="java.sql.PreparedStatement"%>
<%@page import="java.sql.Connection"%>
<%@page import="java.sql.DriverManager"%>
<%@page import="oracle.jdbc.driver.OracleDriver"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%
	request.setCharacterEncoding("utf-8");	

	String yh=request.getParameter("yh");
	String mm=request.getParameter("mm");

	//加载驱动
	Class.forName("oracle.jdbc.driver.OracleDriver");
	
	//定义连接字符串
	String url="jdbc:oracle:thin:@localhost:1521:orcl";
	
	//获得连接
	Connection con=DriverManager.getConnection(url,"scott","zkingedu");
	
	//获得执行对象
	PreparedStatement ps=con.prepareStatement("select * from t_user where user_name=? and user_pwd=?");
	ps.setString(1, yh);
	ps.setString(2, mm);
	
	//获得结果集
	ResultSet rs=ps.executeQuery();
	
	//判断结果集
	if(rs.next()){
		//将用户名存入到服务器的session中
		session.setAttribute("username", yh); //存放在后台
		
		//cookie的值每次发送请求的时候会被自动带上
		//cookie默认是在你当前浏览器打开的过程中生效
		Cookie cookie1=new Cookie("yh",yh);
		Cookie cookie2=new Cookie("mm",mm);
		
		//设置存储时间 (单位是 s) 【七天免登录】
		cookie1.setMaxAge(60*60*24*7);
		cookie2.setMaxAge(60*60*24*7);
		
		//cookie是存放到前台
		response.addCookie(cookie1);
		response.addCookie(cookie2);
		
		//转发
		//request.getRequestDispatcher("/news/index.jsp").forward(request, response);
		//重定向
		response.sendRedirect("news/index.jsp");
	}else{
		//重定向
		response.sendRedirect("${pageContext.request.contextPath}/login.jsp");
	}
	
	//关闭资源
	if(con!=null&&!con.isClosed()){
		con.close();
	}
	if(ps!=null){
		ps.close();
	}
	if(rs!=null){
		rs.close();
	}

%>

五、历史记录

阅读页面

<%@page import="java.net.URLEncoder"%>
<%@page import="java.util.ArrayList"%>
<%@page import="java.util.List"%>
<%@page import="oracle.jdbc.driver.OracleDriver"%>
<%@ page import="java.sql.DriverManager" %>
<%@ page import="java.sql.PreparedStatement" %>
<%@ page import="java.sql.ResultSet" %>
<%@ page import="java.sql.Connection" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <title>bootstrap</title>
    <meta content="width=device-width, initial-scale=1" name="viewport">
    <link href="${pageContext.request.contextPath}/bootstrap-3.3.7-dist/css/bootstrap.css" rel="stylesheet">
    <script src="${pageContext.request.contextPath}/bootstrap-3.3.7-dist/js/jquery-3.5.1.js"></script>
    <script src="${pageContext.request.contextPath}/bootstrap-3.3.7-dist/js/bootstrap.js"></script>
    <style>
        * {
            outline: none !important;
        }

        body,
        html {
            background: #7f8d90;
        }

        nav,
        .breadcrumb {
            border-radius: 0 !important;
            margin-bottom: 0 !important;
        }

        .breadcrumb {
            margin-bottom: 20px !important;
            background: #36485c;
            color: white;
        }

        input,
        select,
        textarea,
        .panel-heading {
            border: none !important;
            border-radius: 0 !important;
        }

        .breadcrumb .active {
            color: yellow;
        }
    </style>
</head>

<body>
<nav class="navbar navbar-default hidden-sm hidden-xs">
    <div class="container-fluid">
        <div class="navbar-header">
            <a class="navbar-brand" href="${pageContext.request.contextPath}/news/index.jsp"
               style="font-size: 25px;">🐖</a>
        </div>
        <ul class="nav navbar-nav">
            <li class="dropdown">
                <a class="dropdown-toggle" data-toggle="dropdown">
                    新闻管理
                    <span class="caret"></span>
                </a>
                <ul class="dropdown-menu">
                    <li><a href="#">新闻发布</a></li>
                    <li class="divider"></li>
                    <li><a href="#">类别管理</a></li>
                </ul>
            </li>
        </ul>
        <ul class="nav navbar-nav navbar-right">
            <li><a><%=request.getParameter("yh") %></a></li>
            <li><a href="#">退出<span class="glyphicon glyphicon-off"></span></a></li>
        </ul>
    </div>
</nav>

<ol class="breadcrumb">
    <li>您当前的位置是</li>
    <li>新闻发布系统</li>
    <li class="active">新闻阅读</li>
</ol>
<%
	//去session中拿历史记录
	Object obj=session.getAttribute("historyList");
	List<String> list=new ArrayList<>();
	if(obj!=null){ //有历史记录
		list=(List<String>)obj;
	}

    //获得新闻的id
    String newId = request.getParameter("newId");
    

    //根据id去数据库做查询操作
    //加载驱动
    Class.forName("oracle.jdbc.driver.OracleDriver");
    //定义连接字符串
    String url = "jdbc:oracle:thin:@localhost:1521:orcl";
    //获得连接
    Connection con = DriverManager.getConnection(url, "scott", "zkingedu");
    //查询新闻的所有数据
    PreparedStatement ps = con.prepareStatement("select * from T_NEWS where NEWS_ID=?");
    //占位符的设置
    ps.setInt(1,Integer.parseInt(newId));
    //得到结果集
    ResultSet rs = ps.executeQuery();
    //定义需要的值
    String title="";
    int count=0;
    String author="";
    String publisher="";
    String content="";
    if(rs.next()){
        //可以取值
        title=rs.getString(2);
        publisher=rs.getString(5);
        author=rs.getString(4);
        content=rs.getString(6);
        count=rs.getInt(7)+1;  //当前阅读了一次
    }
    
    //将阅读信息存到集合中
    list.add(title+"@"+count);
    //将历史记录集合重新放到session中
    session.setAttribute("historyList", list);
    
//------------阅读量的制作-------------------

    //新闻已被阅读
    ps=con.prepareStatement("update  t_news set news_count=news_count+1 where news_id=?");
    //设置占位符
    ps.setInt(1, Integer.parseInt(newId));
    ps.executeUpdate();
%>
<div class="container" style="background: rgba(239, 231, 231, 0.9);border-radius:10px;">
    <h1><%=title%></h1>
    <h3 class="text-right">
        <small>
            <span class="glyphicon glyphicon-user"><span class="label label-default"><%=author%></span></span>
            <span class="glyphicon glyphicon-eye-open"><span class="label label-default"><%=count%></span></span>
            <span class="glyphicon glyphicon-time"><span class="label label-info"><%=publisher%></span></span>
        </small>
    </h3>
    <samp><%=content%></samp>
    <div class="btn-group btn-group-justified" style="margin-bottom: 20px;">
        <div class="btn-group">
            <a href="${pageContext.request.contextPath}/news/doDel.jsp?newId=<%=newId%>" class="btn btn-danger" type="button">删除</a>
        </div>
        <div class="btn-group">
            <a href="${pageContext.request.contextPath}/news/upd.jsp?newId=<%=newId%>" class="btn btn-info" type="button">修改</a>
        </div>
    </div>
</div>

<div class="container" style="background: rgba(239, 231, 231, 0.9);border-radius:10px;margin-top: 10px;">
    <%
    	ps=con.prepareStatement("select * from t_comment where comment_from=?");
    	ps.setInt(1,Integer.parseInt(newId));
    	rs=ps.executeQuery();
    	while(rs.next()){
    %>
    <div class="panel panel-default" style="margin-top: 20px;">
        <div class="panel-heading">
            <span class="glyphicon glyphicon-user"><span class="label label-success"><%=rs.getString(4) %></span></span>
            <p style="margin-top: 10px;text-indent: 2em;">
                <samp><%=rs.getString(5) %></samp>
            </p>
            <p class="text-right">
                <span class="glyphicon glyphicon-time"><span class="label label-info"><%=rs.getString(3) %></span></span>
            </p>
            <div class="btn-group">
            <a href="${pageContext.request.contextPath}/news/doDelPl.jsp?commentId=<%=rs.getInt(1)%>" class="btn btn-danger" type="button">删除</a>
        	</div>
        </div>
    </div>
    <%
    	}
    %>
</div>

<form action="doAddPl.jsp" class="container" style="background: rgba(239, 231, 231, 0.9);border-radius:10px;margin-top: 10px;padding: 30px;">
    <input type="hidden" name="newId" value="<%=newId %>">
    <div class="form-group">
        <label for="name">Name</label>
        <input name="author" id="name" class="form-control" placeholder="用户名称" required type="text">
    </div>
    <div class="form-group">
        <label for="email">Email</label>
        <input name="content" id="email" class="form-control" placeholder="评论内容" required type="text">
    </div>
    <button class="btn btn-default" type="submit">发布评论</button>
</form>

<div style="height: 50px;"></div>
</body>
</html>

历史记录页面

<%@page import="java.net.URLDecoder"%>
<%@page import="java.util.List"%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <meta content="width=device-width, initial-scale=1" name="viewport">
    <link href="${pageContext.request.contextPath}/bootstrap-3.3.7-dist/css/bootstrap.css" rel="stylesheet">
    <script src="${pageContext.request.contextPath}/bootstrap-3.3.7-dist/js/jquery-3.5.1.js"></script>
    <script src="${pageContext.request.contextPath}/bootstrap-3.3.7-dist/js/bootstrap.js"></script>
</head>

<body>
<nav class="navbar navbar-default hidden-sm hidden-xs">
    <div class="container-fluid">
        <div class="navbar-header">
            <a class="navbar-brand" style="font-size: 25px;">当前是您的浏览记录</a>
        </div>
        <ul class="nav navbar-nav navbar-right" style="margin-right: 20px;">
            <li><a href="${pageContext.request.contextPath}/news/index.jsp">返回首页<span class="glyphicon glyphicon-road"></span></a></li>
        </ul>
    </div>
</nav>

<div class="container">
    <ul class="list-group">
    	<%
    		//数据不是从数据库中来的,是从session中拿到的
    		Object obj=session.getAttribute("historyList");
    		if(obj!=null){ //有历史记录
    			List<String> list=(List<String>)obj;
    			for(int i=list.size()-1;i>=0;i--){
    				//倒着来
    				String[] ss=list.get(i).split("@");
    	%>
        <li class="list-group-item">
            <span class="badge"><%=ss[1] %></span>
            <%=ss[0] %>
        </li>
        <%
    			}
    		}
        %>
    </ul>
</div>
</body>
</html>

  

六、session的清空与鉴权

session的清空

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%
	//session的存储时间
	//session默认与服务器共存
	session.setMaxInactiveInterval(60);
	
	//删除session
	session.invalidate();
	
	//跳回登录界面
	response.sendRedirect("/web-05/login.jsp");
%>

session的鉴权

<%
//--------------- 没有登录只能在登录界面(建议在每一个界面都添加一个) ------------------
	//判断用户有没有登录
	Object username=session.getAttribute("username");
	if(username==null){
		response.sendRedirect("/web-05/login.jsp");
	}
%>

修改后的主界面

这个界面做了稍稍的小改动,大家需要仔细的看哦

<%@page import="java.nio.charset.StandardCharsets"%>
<%@page import="java.sql.ResultSet"%>
<%@page import="java.sql.PreparedStatement"%>
<%@page import="java.sql.DriverManager"%>
<%@page import="java.sql.Connection"%>
<%@page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <title>bootstrap</title>
    <meta content="width=device-width, initial-scale=1" name="viewport">
    <link href="${pageContext.request.contextPath}/bootstrap-3.3.7-dist/css/bootstrap.css" rel="stylesheet">
    <script src="${pageContext.request.contextPath}/bootstrap-3.3.7-dist/js/jquery-3.5.1.js"></script>
    <script src="${pageContext.request.contextPath}/bootstrap-3.3.7-dist/js/bootstrap.js"></script>
    <style>
        * {
            outline: none !important;
        }

        body,
        html {
            background: #7f8d90;
        }

        nav,
        .breadcrumb {
            border-radius: 0px !important;
            margin-bottom: 0px !important;
        }

        .breadcrumb {
            margin-bottom: 20px !important;
            background: #36485c;
            color: white;
        }

        li h4 {
            width: 300px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .breadcrumb .active {
            color: yellow;
        }
    </style>
</head>

<%
//--------------- 没有登录只能在登录界面(建议在每一个界面都添加一个) ------------------
	//判断用户有没有登录
	Object username=session.getAttribute("username");
	if(username==null){
		response.sendRedirect("/web-05/login.jsp");
	}
%>

<body>
<nav class="navbar navbar-default hidden-sm hidden-xs">
    <div class="container-fluid">
        <div class="navbar-header">
            <a class="navbar-brand" href="index.html" style="font-size: 25px;">🐖</a>
        </div>
        <ul class="nav navbar-nav">
            <li class="dropdown">
                <a class="dropdown-toggle" data-toggle="dropdown"> 新闻管理
                    <span class="caret"></span>
                </a>
                <ul class="dropdown-menu">
                    <li><a href="${pageContext.request.contextPath}/news/add.jsp">新闻发布</a></li>
                    <li class="divider"></li>
                    <li><a href="#">类别管理</a></li>
                </ul>
            </li>
        </ul>
        <ul class="nav navbar-nav navbar-right">
            <li><a><%=session.getAttribute("username") %></a></li>
            <li><a href="history.jsp">历史记录</a></li>
            <li><a href="doExit.jsp">退出<span class="glyphicon glyphicon-off"></span></a></li>
        </ul>
    </div>
</nav>

<ol class="breadcrumb">
    <li>您当前的位置是</li>
    <li>新闻发布系统</li>
    <li class="active">首页</li>
</ol>

<form action="${pageContext.request.contextPath}/news/index.jsp" class="form-inline" style="margin: 0px auto 20px;" method="post">
    <div class="form-group" style="display: block;text-align: center;">
        <div class="input-group">
            <div class="input-group-addon">新闻标题</div>
            <input name="newname" class="form-control" placeholder="请在此输入搜索的关键字" type="text">
            <span class="input-group-btn">
                    <button class="btn btn-primary" type="submit">搜索🔍</button>
                </span>
        </div>
    </div>
</form>

<div class="container">
	<ul class="list-group">
	<%
	//点击表单之后,跳转的是当前这个页面,同时携带一个newname过来(newname是查询关键字)
	String newName=request.getParameter("newname");
	if(newName==null){ //当newName为null时
		newName=""; //查询所有
	}
	//破碎重组
	newName=new String(newName.getBytes(StandardCharsets.ISO_8859_1),StandardCharsets.UTF_8);
	
	
	//加载驱动
	Class.forName("oracle.jdbc.driver.OracleDriver");
	
	//定义连接字符串
	String url="jdbc:oracle:thin:@localhost:1521:orcl";
	
	//获得连接
	Connection con=DriverManager.getConnection(url,"scott","zkingedu");
	
	//查询所有的新闻数据
	PreparedStatement ps=con.prepareStatement("select * from t_news where news_title like ?");
	ps.setString(1, "%"+newName+"%");
	
	//得到结果集
	ResultSet rs=ps.executeQuery();
	
	//遍历结果集
	while(rs.next()){
	%>
        <li class="list-group-item">
            <h4 class="list-group-item-heading">
                <a data-placement="bottom" data-toggle="tooltip" href="${pageContext.request.contextPath}/news/read.jsp?newId=<%=rs.getInt(1) %>" title="国家卫健委:昨日新增确诊病例29例,其中本土病例2例">
                    <%=rs.getString(2) %>
                </a>
            </h4>
            <p class="list-group-item-text text-right">
                <span class="glyphicon glyphicon-user"><code><%=rs.getString(4) %></code></span>
                <span class="glyphicon glyphicon-eye-open"><code><%=rs.getInt(7) %></code></span>
                <span class="glyphicon glyphicon-tag"><code><%=rs.getInt(8) %></code></span>
                <span class="glyphicon glyphicon-time"><code><%=rs.getString(5) %></code></span>
            </p>
        </li>
   	<%
   		}
	
	//关闭资源
	if(con!=null&&!con.isClosed()){
		con.close();
	}
	if(ps!=null){
		ps.close();
	}
	if(rs!=null){
		rs.close();
	}
   	%>
    </ul>
</div>
<div class="container text-center">
    <ul class="pagination" style="margin: 20px auto;">
        <li>
            <a href="#"><span>&laquo;</span></a>
        </li>
        <li><a href="#">1</a></li>
        <li><a href="#">2</a></li>
        <li><a href="#">3</a></li>
        <li><a href="#">4</a></li>
        <li><a href="#">5</a></li>
        <li>
            <a href="#"><span>&raquo;</span></a>
        </li>
    </ul>
</div>
<script>
    $(function () {
        $('[data-toggle="tooltip"]').tooltip({
            trigger: "hover"
        })
    })
</script>
</body>
</html>

今天就分享到这啦

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值