简单实现一下对cookie的操作,包括获取值,存储值,清除值。
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<div style="width: 500px; margin: 0 auto;">
<form th:action="@{/user/login}" method="post">
<span style="color: red;" th:if="${not #strings.isEmpty(msg)}" th:text="${msg}"></span><br>
<label th:text="#{login.userName}">UserName</label><input type="text" id="userNm" name="userName"/><br>
<label th:text="#{login.password}">Password</label><input type="password" id="pword" name="password"/><br>
<label>记住密码:</label><input type="checkbox" id="memberId" name="memberUserPass" value="1"/><br>
<input type="submit" value="提交">
<a href="#!" onclick="delAllCookie()">清除cookie!</a>
</form>
<a th:href="@{/login(lang='zh_CN')}">中文</a>
<a th:href="@{/login(lang='en_US')}">English</a>
</div>
<script type="text/javascript">
window.onload = function() {
// Cookie中值长这样 userNm=123; userPw=123; cookieNmPw=1
let checkFlg = getCookie("cookieNmPw").cookieVal;
if (checkFlg == "1") {
document.getElementById("pword").value = getCookie("userPw").cookieVal;
document.getElementById("userNm").value = getCookie("userNm").cookieVal;
document.getElementById("memberId").checked = true;
}
}
/* 获取指定的cookie内容 */
let getCookie = function(key) {
let cookieAll = document.cookie;
let cookieArray = [];
let cookieVal = "";
let cookieKey = "";
if (cookieAll.length > 0) {
if (cookieAll.indexOf(";") != -1) {
cookieArray = cookieAll.split(";");
} else {
cookieArray.splice(cookieAll.length, 0, cookieAll);
}
}
for (let temp of cookieArray) {
let keyVal = temp.split("=");
if (keyVal[0].trim() == key) {
cookieKey = keyVal[0];
cookieVal = keyVal[1];
}
}
return {cookieKey: cookieKey, keyLen: cookieKey.length, cookieVal: cookieVal,valLen: cookieVal.length};
}
/* 清除指定的cookie */
let delCookie = function(key){
var d = new Date();
document.cookie = key + "=;expires=" + d.toGMTString();
}
/* 清除所有的cookie */
let delAllCookie = function() {
let cookieAll = document.cookie;
let cookieArray = [];
let cookieVal = "";
let cookieKey = "";
if (cookieAll.length > 0) {
if (cookieAll.indexOf(";") != -1) {
cookieArray = cookieAll.split(";");
} else {
cookieArray.splice(cookieAll.length, 0, cookieAll);
}
}
for (let temp of cookieArray) {
delCookie(temp.split("=")[0]);
}
}
</script>
</body>
</html>
@PostMapping(value = "/user/login")
public String userLogin(@RequestParam("userName") String userName,
@RequestParam("password") String password,
@RequestParam(value = "memberUserPass", required = false, defaultValue = "0") String memberUserPass,
Map<String, Object> map, HttpSession session,
HttpServletRequest request, HttpServletResponse response) {
if (!StringUtils.isEmpty(userName) && "123".equals(password)) {
session.setAttribute("loginUser", userName);
Cookie cookieNm = null;
Cookie cookiePw = null;
Cookie cookieNmPw = null;
if ("1".equals(memberUserPass)) {
cookieNm = new Cookie("userNm", userName);
cookiePw = new Cookie("userPw", password);
cookieNmPw = new Cookie("cookieNmPw", memberUserPass);
// 一定要设置cookie的路径,否则js中使获取不到Cookie的值
cookieNm.setPath("/");
cookiePw.setPath("/");
cookieNmPw.setPath("/");
} else {
// 清除cookie中缓存的值(后台做法)
cookieNm = new Cookie("userNm", null);
cookiePw = new Cookie("userPw", null);
cookieNmPw = new Cookie("cookieNmPw", null);
cookieNm.setPath("/");
cookieNm.setMaxAge(0);
cookiePw.setPath("/");
cookiePw.setMaxAge(0);
cookieNmPw.setPath("/");
cookieNmPw.setMaxAge(0);
}
response.addCookie(cookieNm);
response.addCookie(cookiePw);
response.addCookie(cookieNmPw);
return "redirect:/success";
} else {
map.put("msg", "用户名或密码错误!!!");
return "login";
}
}
js中也能进行添加cookie,这样实现。
document.cookie = "userNm=siyu";
document.cookie = "password=aaa";
document.cookie = "password1=bbb";
document.cookie = "password2=ccc";
document.cookie = "password3=ddd";
document.cookie = "password4=eee";
document.cookie = "password5=fff";