核心代码
// 最外层 index.js 主入口文件
const Koa = require('koa')
const static = require('koa-static')
const views = require('koa-views')
const Router = require('koa-router')
const parser = require('koa-bodyparser')
const musicData = require('./data/music.json') //直接转化成对象 fs也可以用，只不过要自己转对象
const md5 = require('md5')
const app = new Koa()
const router = new Router()
app.use(views(__dirname + '/views'), {
map: {
html: 'pug'
}
})
app.use(static(__dirname + '/static'))
app.use(parser())
router.get('/login',async (ctx) => {
// ctx.body = '登录页面'
if(ctx.cookies.get('isLogin') == md5('张三' + '123')) {
console.log(1)
ctx.redirect('/list')
}
await ctx.render('login.pug')
})
router.post('/checkUser', (ctx) => {
if(ctx.request.body.username == '张三' && ctx.request.body.pwd == '123') {
// 用户名密码正确，可选择记住我 ctx.request.body.memberMe
// cookie request header 会带过去，不管是需要传递还是不需要传递
if(ctx.request.body.memberMe) {
ctx.cookies.set('isLogin', md5('张三' + '123'),{
maxAge: 60 * 60 * 24 * 7
})
}
ctx.redirect('/list')
} else {
ctx.redirect('/error')
}
})
router.get('/list', async ctx => {
await ctx.render('list.pug', {
musicData: musicData
})
})
router.get('/error', async ctx => {
await ctx.render('error.pug')
})
app.use(router.routes())
app.listen(3000)
cookie 方式实现
// js 下的 list.js
{
window.addEventListener('load', async () => {
let btnSkin = document.querySelector('.changeSkin')
let colorArr = ["white","rgb(204,232,207)", "rgb(200,200,169)", "rgb(114,111,128)"];
let key = 0
key = await getCookies('key')
key = key || 0
document.body.style.background = colorArr[key]
btnSkin.addEventListener('click', () => {
key++
key = (key == colorArr.length) ? 0 : key
setCookies ('key', key, {
"max-age": '60 * 60 * 24'
})
document.body.style.background = colorArr[key]
})
})
// ——————————————————————————————————————————————————————————
// 封装对cookie的操作
function setCookies (name, value, options = {}) {
let cookieData = `${name}=${value};`
for(let key in options) {
let str = `${key}=${options[key]};`
cookieData += str
}
// console.log(cookieData)
document.cookie = cookieData
}
function getCookies (name) {
return new Promise((resolve) => {
let arrCookies = document.cookie.split(';')
let arr
arrCookies.forEach(item => {
arr = item.split('=')
if(arr[0] == name) {
// return arr[1]
resolve(arr[1])
}
})
resolve('')
})
}
// ——————————————————————————————————————————————————————————
}
localStorage 实现
{
window.addEventListener('load', async () => {
let btnSkin = document.querySelector('.changeSkin')
let colorArr = ["white","rgb(204,232,207)", "rgb(200,200,169)", "rgb(114,111,128)"];
let key = 0
key = localStorage.getItem('key') || 0
document.body.style.background = colorArr[key]
btnSkin.addEventListener('click', () => {
key++
key = (key == colorArr.length) ? 0 : key
localStorage.setItem('key', key)
document.body.style.background = colorArr[key]
})
})
}
客户端储存
知识要点
- 在koa中cookie的使用方式
- 客户端cookie的使用方式
- localStorage及sessionStorage使用
- 各种本地存储的异同
客户端储存方案
-
服务端储存
- 服务端文件储存
- 内存
- 数据库：mysql、mongoodb、Oracle等等。
-
客户端储存(离线储存)
- 浏览器
cookie
-
cookie是http协议下，服务端或者脚本可以维护客户端信息的一种方式。
-
koa中cookie的使用
- 储存cookie的值；
ctx.cookies.set(name, value, [options])- 获取cookie的值
ctx.cookies.get(name, [options])- options常用设置
maxAge一个数字表示从 Date.now() 得到的毫秒数expirescookie 过期的Datepathcookie 路径, 默认是'/'domaincookie 域名secure安全 cookie 设置后只能通过https来传递cookiehttpOnly服务器可访问 cookie, 默认是 trueoverwrite一个布尔值，表示是否覆盖以前设置的同名的 cookie (默认是 false). 如果是 true, 在同一个请求中设置相同名称的所有 Cookie
登录案例
-
验证用户名密码是否正确；
-
实现登录功能，通过记住我实现七天免登录；
通过本地cookie实现记录换肤功能
-
客户端cookie使用方式；
-
设置
document.cookie="key=value"-
key和value是包含在一个字符串中
- key包含字段
- [name] 这个name为自己取的cookie名称，同名的值会覆盖
- domain 所属域名
- path 所属路径
- Expires/Max-Age 到期时间/持续时间 (单位是秒)
- http-only 是否只作为http时使用，如果为true，那么客户端能够在http请求和响应中进行传输，但时客户端浏览器不能使用js去读取或修改
- key包含字段
-
多个key=value使用 ; （分号）分隔
-
-
获取
document.cookie返回值是当前域名下的所有cookie，并按照某种格式组织的字符串 ：key=value;key1=value1;......keyn=valuen
-
封装
- 设置cookie封装
//设置cookie function setCookie(name,value,options={}){ let cookieData = `${name}=${value};`; for(let key in options){ let str = `${key}=${options[key]};`; cookieData += str; } document.cookie = cookieData; }- 获取cookie
//获取Cookie function getCookie(name){ let arr = document.cookie.split("; "); for(let i=0;i<arr.length;i++){ let items = arr[i].split("="); if(items[0]==name){ return items[1]; } } return ""; } -
几种皮肤背景色
["white","rgb(204,232,207)", "rgb(200,200,169)", "rgb(114,111,128)"]
-
客户端操作cookie特点
- 浏览器会主动存储接收到的 set-cookie 头信息的值
- 有时效性；
- 可以设置 http-only 属性为 true 来禁止客户端代码（js）修改该值
本地缓存Storage
-
localStorage及sessionStorage使用
-
设置
setItem(key, value) 添加或更新（如果数据项中已存在该key）数据项中指定key的value
-
获取
getItem(key) 获取数据项中指定key对应的value
-
移出指定数据
removeItem(key) 删除数据项中指定key的value
-
清空所有数据
clear() 清空所有数据项
-
通过storage来改造换肤功能
通过storage实现添加歌曲列表功能
- 通过stroage来处理本地多开音乐页面得问题；
- 实现删除及删除所有列表的功能；
本地存储异同
-
共同点
-
localStorage和sessionStorage和cookie共同点
- 同域（同源策略）限制：同源策略：请求与响应的 协议、域名、端口都相同 则时同源，否则为 跨源/跨域
- 存储的内容都会转为字符串格式
- 都有存储大小限制
-
localStorage和sessionStorage共同点
-
API相同
-
存储大小限制一样基本类似
-
无个数限制
-
-
不同点
-
localStorage
- 没有有效期，除非删除，否则一直存在
- 同域下页面共享
- 支持 storage 事件
-
sessionStorage
- 浏览器关闭，自动销毁
- 页面私有
- 不支持 storage 事件
-
cookie
- 浏览器也会在每次请求的时候主动组织所有域下的cookie到请求头 cookie 中，发送给服务器端
- 浏览器会主动存储接收到的 set-cookie 头信息的值
- 可以设置 http-only 属性为 true 来禁止客户端代码（js）修改该值
- 可以设置有效期 (默认浏览器关闭自动销毁)(不同浏览器有所不同)
- 同域下个数有限制，最好不要超过50个(不同浏览器有所不同)
- 单个cookie内容大小有限制，最好不要超过4000字节(不同浏览器有所不同)
