JS 客户端存储

Cookie

HTTP Cookie（也叫 Web Cookie 或浏览器 Cookie）是服务器发送到用户浏览器并保存在本地的一小块数据，它会在浏览器下次向同一服务器再发起请求时被携带并发送到服务器上。通常，它用于告知服务端两个请求是否来自同一浏览器，如保持用户的登录状态。Cookie 使基于无状态的HTTP协议记录稳定的状态信息成为了可能。

Cookie 主要用于以下三个方面：

• 会话状态管理（如用户登录状态、购物车、游戏分数或其它需要记录的信息）
• 个性化设置（如用户自定义设置、主题等）
• 浏览器行为跟踪（如跟踪分析用户行为等）

原生使用

// 创建一个名称为name，对应值为value的cookie，由于没有设置失效时间，默认失效时间为该网站关闭时
document.cookie="name=cookie";

// 您还可以为 cookie 添加一个过期时间（以 UTC 或 GMT 时间）。默认情况下，cookie 在浏览器关闭时删除：
document.cookie="username=John Doe; expires=Thu, 18 Dec 2043 12:00:00 GMT";

// 您可以使用 path 参数告诉浏览器 cookie 的路径。默认情况下，cookie 属于当前页面
document.cookie="username=John Doe; expires=Thu, 18 Dec 2043 12:00:00 GMT; path=/";

// 在 JavaScript 中，修改 cookie 类似于创建 cookie，如下所示：
document.cookie="username=John Smith; expires=Thu, 18 Dec 2043 12:00:00 GMT; path=/";

// 删除 cookie 非常简单。您只需要设置 expires 参数为以前的时间即可，如下所示，设置为 Thu, 01 Jan 1970 00:00:00 GMT:
document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 GMT";

// 获取html页面cookie方法
const getCookie = (name) => {
    
  let result = document.cookie.match(
    '(^|[^;]+)\\s*' + name + '\\s*=\\s*([^;]+)'
  )
  return result ? result.pop() : ''
}

// 如果要将cookie设置为10天后过期，可以这样实现
//获取当前时间
const date=new Date();
const expiresDays=10;
//将date设置为10天以后的时间
date.setTime(date.getTime()+expiresDays*24*3600*1000);
//将userId和userName两个cookie设置为10天后过期
document.cookie="userId=828; userName=hulk; expires="+date.toGMTString();

封装原生

// 添加一个cookie：addCookie(name,value,expiresHours)
// 该函数接收3个参数：cookie名称，cookie值，以及在多少小时后过期。这里约定expiresHours为0时不设定过期时间，即当浏览器关闭时cookie自动消失。
const addCookie = (name,value,expiresHours) => {
    
	const cookieString=name+"="+escape(value);
  //判断是否设置过期时间
  if(expiresHours>0){
    
  const date = new Date();
    date.setTime(date.getTime+expiresHours*3600*1000);
    cookieString=cookieString+"; expires="+date.toGMTString();
  }
  document.cookie=cookieString;
}

// 获取指定名称的cookie值：getCookie(name)
// 该函数返回名称为name的cookie值，如果不存在则返回空
const getCookie = (name) => {
    
  const strCookie=document.cookie;
  const arrCookie=strCookie.split("; ");
  for(let i=0;i<arrCookie.length;i++){
    
    let arr=arrCookie[i].split("=");
    if(arr[0]==name)return arr[1];
  }
  return "";
}

// 删除指定名称的cookie：deleteCookie(name)
// 该函数可以删除指定名称的cookie
const deleteCookie = (name) =>{
    
  const date=new Date();
  date.setTime(date.getTime()-10000);
  document.cookie=name+"=v; expires="+date.toGMTString();
}

插件使用

js-cookie是一个简单的,轻量级的处理cookies的js API，用来处理cookie相关的插件

// 下载
npm install --save js-cookie

// 引用
import Cookies from 'js-cookie'

// 创建一个名称为name，对应值为value的cookie，由于没有设置失效时间，默认失效时间为该网站关闭时
Cookies.set(name, value)

// 创建一个有效时间为7天的cookie
Cookies.set(name, value, {
     expires: 7 })

// 创建一个带有路径的cookie
Cookies.set(name, value, {
     path: '' })

// 创建一个value为对象的cookie
const obj = {
     name: 'ryan' }
Cookies.set('user', obj);

// 获取指定名称的cookie
Cookies.get(name) // value

// 获取value为对象的cookie
const obj = {
     name: 'ryan' }
Cookies.set('user', obj)
JSON.parse(Cookies.get('user'))

// 获取所有cookie
Cookies.get();

// 删除指定名称的cookie
Cookies.remove(name) // value

// 删除带有路径的cookie
Cookies.set(name, value, {
     path: '' })
Cookies.remove(name, {
     path: '' })

Web Storage

Web Storage API 提供机制， 使浏览器能以一种比使用Cookie更直观的方式存储键/值对。

Web Storage 包含如下两种机制：

• sessionStorage 为每一个给定的源（given origin）维持一个独立的存储区域，该存储区域在页面会话期间可用（即只要浏览器处于打开状态，包括页面重新加载和恢复）。
• localStorage 同样的功能，但是在浏览器关闭，然后重新打开后数据仍然存在。

常用API

• Storage.key()

  该方法接受一个数值 n 作为参数，并返回存储中的第 n 个键名。

• Storage.getItem()

  该方法接受一个键名作为参数，返回键名对应的值。

• Storage.setItem()

  该方法接受一个键名和值作为参数，将会把键值对添加到存储中，如果键名存在，则更新其对应的值。

• Storage.removeItem()

  该方法接受一个键名作为参数，并把该键名从存储中删除。

• Storage.clear()

  调用该方法会清空存储中的所有键名。

基本使用

localStorage.setItem('bgcolor', 'yellow');
localStorage.getItem('bgcolor');
localStorage.removeItem('bgcolor');
localStorage.key(0); // 应该返回 'bgcolor'

Web Storage和cookies区别

cookies

• 创建目的
  • 为了保持http状态
  • 为了标识用户信息而存储在本地上的数据
• 特点
  • 可存储大小4k
  • 存储个数有限制（各个浏览器不同）
  • 有效时间在设置的cookies过期时间之前一直有效

sessionStorage和localStorage

• 创建目的
  • 便于客户端存储数据
• 相同点
  • 都是由h5 web Storage API 提供
  • 在本地保存
  • 和存储大小5M以上
• 有效期时间不同
  • sessionStorage 数据在当前浏览器窗口关闭后自动删除
  • localStrong 存储持久数据 浏览器关闭后不删除数据，除非自行删除

共同点 记录用户状态

区别

• cookie
  • 采用的是在客户端保存状态的方案 即运行在客户端
  • 有大小限制，存储个数有限制
  • 有安全隐患 通过某些手法篡改本地存储的信息类欺骗服务器
  • 支持跨域名访问
• session
  • 采用的是在服务端保持状态的方案 即运行在服务端
  • 没有大小限制和服务端内存大小有关
  • 过多会增加服务器压力
  • 仅在他所在的域名内有效

各自优势

• cookie
  • 极高的扩展性和可用性
  • 不需要使用大量服务器资源
  • 简单性cookie是一种基于文本的轻量结构，包括简单的键值对，结构简单
• session
  • 易于读写
  • 易于站点的用户化

常见攻击方式及解决方案

cookie

• 具体
  • 直接访问cookie文件直线想要的机密信息
  • 进行cookie信息传递时被截取
  • 攻击者伪造cookie信息、客户端获取后进行操作
• 解决方案
  • 不要在cookie中保存敏感信息
  • 不要在cookie中保存你没有经过加密的或者容易被解析的敏感信息
  • 对从客户兑换获取的cookie信息进行严格校验

session

• 具体
  • 会话劫持（通过获取用户sessionID后，使用该sessionID登录目标账号）
  • 会话固定（诱骗受害者使用攻击者指定的会话标识sessionID的攻击手段）
• 解决方案
  • 使用user-Agent检测请求的一致性；设置httpOrly，可以防止客户端脚本访问这个cookie，从而有效地防止xss攻击；关闭透明+ sessionID；更改session名称
  • 用户登录时生成新的sessionID