day17_cookie_webstorage
day17_cookie_webstorage
1cookie介绍
主要作用:把一些与用户相关的数据 存储在浏览器中 发送请求时自动发送给服务端(服务端可以少存一些用户相关数据)
特点:
1存储在浏览器中
2使用键值对存储 存储字符串 尽量不要使用中文 支持较差
3由浏览器控制发送和存储 请求时 请求头 cookie 会把cookie数据发送给服务端 只有key=value;key=value
响应时 响应头 set-cookie 通知浏览器保存cookie
4数据不安全 用户自己可以修改和删除 不要把服务器的关键输出存在cookie中
2cookie使用
向服务器发自定义数据的位置
1.请求参数 key=value
2.请求头 支持自定义请求头
3.cookie 存好自动发送 固定请求头 cookie
java方式
写操作
Cookie cookie = new Cookie("ckkey", "ckval3");
//保证key不重复 path统一设置到根/
cookie.setPath("/");
//存活时间 单位秒
// 正整数 以秒为单位计算过期时间
// 负数 有效时间恢复为默认值 Session(关闭浏览器自动失效)
// 0 删除cookie
cookie.setMaxAge(60*60*24*7);
//让响应报文中出现set-cookie
resp.addCookie(cookie);
读操作
Cookie[] cookies = req.getCookies();
for(Cookie ck: cookies){
System.out.println(ck.getName()+"----"+ck.getValue());
if("ckkey".equals(ck.getName())){
ck.setValue("rose");
ck.setPath("/");
resp.addCookie(ck);
}
}
注意: cookie 如果先读后写 想要覆盖cookie 需要保证 同key 同path
主要作用 向服务端传值
cookie 与 Session 的区别
* 1 服务器存储session对象是 使用了map Map<String,HttpSession>
session编号
* 2 使用session对象时 服务器创建session对象 存入集合
* 自动写cookie JSESSIONID 把cookie编号写给浏览器
* 3 每次服务器自动读取 JSESSIONID 看服务器session集合中有没有编号相同的session对象
* 如果有 直接给当次请求使用 如果没有 新建session
*
* 4 session要使用 必须有cookie
* session依赖cookie cookie不能使用 session也不能使用
* redis 第三方缓存 自定义请求头传token
js方式
写操作
// 写cookie document.cookie = "jskey=jsval;path=/;expires="+new Date('2021-9-11 11:11:11');
const writeCk = ()=>{
document.cookie = "jskey=jsval;path=/;expires="+new Date('2025-9-11 11:11:11');
}
读操作
//document.cookie ckkey=jack; test=abc123; ckkey=rose; jskey=jsval
//读到cookie 有格式的字符串 需要手动解析
const readCk = ()=>{
console.log(document.cookie )
}
在页面中 跨页面共享数据
3webstorage使用
webStorage 设计用来做跨页面共享数据 主要在浏览器中缓存数据
WebStorage
localStorage 在当前网站domian下永久存在
sessionStorage 关闭浏览器自动失效
读写操作方便
作用 跨页面共享数据
写操作
//属性方式
localStorage.username = "jack";
//函数方式
localStorage.setItem("age","15");
读操作
//属性方式
console.log(localStorage.username)
//函数方式
console.log(localStorage.getItem("age"))
//json对象 转成json再使用
console.log(JSON.parse(localStorage.user) )
删除
//单条删除
localStorage.removeItem("username")
//全部删除
localStorage.clear()
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<button onclick="writeStorage()">写storage</button>
<button onclick="readStorage()">读storage</button>
<button onclick="delStorage()">删除storage</button>
</body>
<script>
/* WebStorage
localStorage 在当前网站domian下永久存在
sessionStorage 关闭浏览器自动失效
读写操作方便
作用 跨页面共享数据
写操作
//属性方式
localStorage.username = "jack";
//函数方式
localStorage.setItem("age","15");
读操作
//属性方式
console.log(localStorage.username)
//函数方式
console.log(localStorage.getItem("age"))
//json对象 转成json再使用
console.log(JSON.parse(localStorage.user) )
删除
//单条删除
localStorage.removeItem("username")
//全部删除
localStorage.clear()
*/
const writeStorage = ()=>{
//属性方式
localStorage.username = "jack";
//函数方式
localStorage.setItem("age","15");
//如果是json对象 注意要转成标准json字符串 再存
let myUser = {name:'rose',age:15,addr:'新华大街'};
sessionStorage.user = JSON.stringify(myUser)
}
const readStorage = ()=>{
//属性方式
console.log(localStorage.username)
//函数方式
console.log(localStorage.getItem("age"))
//json对象 转成json再使用
console.log(JSON.parse(localStorage.user) )
}
const delStorage = ()=>{
localStorage.removeItem("username")
localStorage.clear()
}
</script>
</html>
4登录场景使用的技术方案
1.场景分析
2.sql分析(验证场景分析是否能实现)
-- 粗糙处理
select * from admin_user where username = 'wangshaocheng' and `password` = 'abc123' and isvalid = 1
-- 详细报错
-- 单查用户名 再通过java代码 做数据匹配 报不同的结果给页面
select * from admin_user where username = 'wangshaocheng'
-- 更新最后登录时间
update admin_user set login_time = NOW() where uid = 3
-- 查询用户菜单信息
select am2.*,am.mid as submid ,am.menuname as submenuname ,am.url as suburl ,am.glyphicon as subglyphicon
from rel_admin_user_menu rum
inner join admin_menu am on rum.mid = am.mid
inner join admin_menu am2 on am.pid = am2.mid
where rum.uid = 3
3编码过程中 测试的节点
自测
1 dao完成 单测dao
2 接口完成 用不同的数据测试接口
3 前后端联调
浙公网安备 33010602011771号