前端本地存储

前端的存储

分类

1. localStorage；
2. sessionStorage;
3. cookie;
4. indexDB；
5. webSQL

cookie

cookie的基本用法

1. 写入cookie

document.cookie = 'username=xxx';
document.cookie = 'userage=18';
//不能同时设置，只能一个一个设置

2. 获取cookie

console.log(document.cookie); //得到所有cookie，没个以“: ”分隔

cookie的属性

1. name
2. value

注意：cookie的名称或值如果包含非英文字母，写入时需要使用encodeURLComponent()编码，读取时使用decodeURLComponent()解码

document.cookie = `username=${encodeURLComponent('张三')}`;

3. 失效时间
   如果默认没有设置cookie，浏览器关闭时cookie失效，此时的cookie叫做会话cookie

设置失效时间

//1. expires：值为Date类型，表示xxx后过期
document.cookie = `username=xxx; expires=${new Date()}`;
//2. max-age：值为数字，表示当前时间+多少秒后过期，单位是秒。如果为0或者负数，cookie会被删除
document.cookie = 'username=xxx; max-age=5';

4. domain域（根据域名获取、设置cookie）
5. path路径（根据路径获取、设置cookie）
6. httpOnly：属性不能通过JS去访问
7. secure：是否允许不在http的情况下获取到cookie

注意：前后端都可以设置cookie；每个域名下的cookie数量有限，后设置的cookie会清除以前设置的cookie；每个cookie大小为4k左右

cookie封装

//写入cookie
export const setCookie = (name, value, {maxAge, domain, path, secure}={})=>{
	let cookieText = `${encodeURLComponent(name)}=${encodeURLComponent(value)}`;
	if(typeof maxAge === 'number'){
		cookieText += `; max-age=${maxAge}`
	}
	if(domain){
		cookieText += `; domain=${domain}`
	}
	if(path){
		cookieText += `; path=${path}`
	}
	if(secure){
		cookieText += `; secure`
	}
	document.cookie = cookieText;
}

//获取cookie
export const getCookie = name => {
	name = `${encodeURLComponent(name)}`;
	const cookieArr = document.cookie.split('; ');
	for(const item of cookieArr){
		const [cookieName, cookieValue] = item.split('=');
		if(cookieName === name){
			return decodeURLComponent(cookieValue);
		}
	}
	return;
}

//删除cookie
export const removeCookie = (name, {domain, path}={})=>{
	setCookie(name, '', {domain, path, maxAge: -1})
}

localStorage

1. localStorage.setItem()
2. localStorage.getItem()：获取不存在的localStorage会返回null
3. localStorage.removeItem()：删除不存在的localStorage不会报错
4. localStorage.clear()：清除所有

注意：localStorage的键值必须为字符串类型

区别

• localStorage与sessionStorage的区别
  localStorage不主动删除会一直存在，sessionStorage浏览器关闭或页面关闭立即清空

• cookie与localStorage、sessionStorage的区别
  cookie大小为4k左右，后两者为5M左右

• indexDB与cookie、localStorage、sessionStorage的区别
  IndexedDB 就是浏览器提供的本地数据库，它可以被网页脚本创建和操作。IndexedDB 允许储存大量数据，提供查找接口，还能建立索引。