客户端储存
知识要点
在koa中cookie的使用方式
客户端cookie的使用方式
localStorage及sessionStorage使用
各种本地存储的异同
服务端储存
服务端文件储存
内存
数据库:mysql、mongoodb、Oracle等等。
客户端储存(离线储存)
浏览器
###cookie
cookie究竟是什么?
cookie实际上是一小段文本信息(key-value格式)。客户端向服务器发起请求,如果服务器需要记录该用户状态,就使用response向客户端浏览器颁发一个cookie。客户端浏览器会把cookie存起来。当浏览器再请求该网站时,浏览器把请求的网址连同该cookie一同提交给服务器。服务器检查该cookie,以此来辨认客户
cookie是http协议下,服务端或者脚本可以维护客户端信息的一种方式。
koa中cookie的使用
储存cookie的值;
ctx.cookies.set(name, value, [options])
获取cookie的值
ctx.cookies.get(name, [options])
options常用设置
maxAge
一个数字表示从 Date.now() 得到的毫秒数
expires
cookie 过期的 Date
path
cookie 路径, 默认是‘/‘
domain
cookie 域名
secure
安全 cookie 设置后只能通过https来传递cookie
httpOnly
服务器可访问 cookie, 默认是 true
overwrite
一个布尔值,表示是否覆盖以前设置的同名的 cookie (默认是 false). 如果是 true, 在同一个请求中设置相同名称的所有 Cookie
客户端cookie使用方式;
设置
document.cookie="key=value"
key和value是包含在一个字符串中
key包含字段
[name] 这个name为自己取的cookie名称,同名的值会覆盖
domain 所属域名
path 所属路径
Expires/Max-Age 到期时间/持续时间 (单位是秒)
http-only 是否只作为http时使用,如果为true,那么客户端能够在http请求和响应中进行传输,但时客户端浏览器不能使用js去读取或修改
多个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 ""; }
###客户端操作cookie特点
浏览器会主动存储接收到的 set-cookie 头信息的值
有时效性;
可以设置 http-only 属性为 true 来禁止客户端代码(js)修改该值
localStorage及sessionStorage使用
设置
setItem(key, value) 添加或更新(如果数据项中已存在该key)数据项中指定key的value
获取
getItem(key) 获取数据项中指定key对应的value
移出指定数据
removeItem(key) 删除数据项中指定key的value
清空所有数据
clear() 清空所有数据项
###本地存储异同
共同点
localStorage和sessionStorage和cookie共同点
同域(同源策略)限制:同源策略:请求与响应的 协议、域名、端口都相同 则时同源,否则为 跨源/跨域
存储的内容都会转为字符串格式
都有存储大小限制
localStorage和sessionStorage共同点
API相同
存储大小限制一样基本类似
无个数限制
不同点
localStorage
没有有效期,除非删除,否则一直存在
同域下页面共享
支持 storage 事件
sessionStorage
浏览器关闭,自动销毁
不支持 storage 事件
cookie
浏览器也会在每次请求的时候主动组织所有域下的cookie到请求头 cookie 中,发送给服务器端
浏览器会主动存储接收到的 set-cookie 头信息的值
可以设置 http-only 属性为 true 来禁止客户端代码(js)修改该值
可以设置有效期 (默认浏览器关闭自动销毁)(不同浏览器有所不同)
同域下个数有限制,最好不要超过50个(不同浏览器有所不同)
单个cookie内容大小有限制,最好不要超过4000字节(不同浏览器有所不同)
前端必要——客户端存储 cookie、localStorage、sessionStroage
原文:https://www.cnblogs.com/jfen625/p/12511500.html