客户端存储 #

储存方案 #

• 服务端储存
  • 服务端文件储存
  • 内存
  • 数据库：mysql、mongoodb、Oracle等等。
• 客户端储存(离线储存)
  • 浏览器

cookie #

cookie是http协议下，服务端或者脚本可以维护客户端信息的一种方式。

服务端（koa）中cookie的使用 #

• 储存cookie的值；

  javascript

   ctx.cookies.set(name, value, [options])
  

• 获取cookie的值

  javascript

   ctx.cookies.get(name, [options])
  

• options常用设置

  • maxAge 一个数字表示从 Date.now() 得到的毫秒数
  • expires cookie 过期的 Date
  • path cookie 路径, 默认是'/'
  • domain cookie 域名
  • secure 只能通过https来传递cookie
  • httpOnly 服务器可访问 cookie, 默认是 true，客户端不允许使用js去读取或修改
  • overwrite 一个布尔值，表示是否覆盖以前设置的同名的 cookie (默认是 false). 如果是 true, 在同一个请求中设置相同名称的所有 Cookie
  • sameSite

客户端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=value

封装 #

• 设置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）修改该值

本地缓存Storage #

• localStorage及sessionStorage使用

// 设置
localStorage.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字节(不同浏览器有所不同)

IndexDB #

运行在浏览器的非关系型数据库，没有大小限制，不仅可以存储字符串，还可以存储二进制数据。

• 键值对存储
• 异步通信
• 支持事务：意味着操作过程中出现错误，整个事务会取消，回滚到发生之前的状态
• 同源限制