前端小记

# 浏览器存储

在前端的数据展示和身份认证方面，不可避免的需要暂时或者持久的，保存一定量的数据在浏览器本地，避免将所有数据存入内存，过度占用系统资源

下面就来看看一共有几种方法可以进行浏览器存储

cookie与session属于传统的身份认证方式，也可在其中存储数据，今天来好好研究一下cookie与token在身份认证方面的差异，与cookie与session的异同

HTTP是一种没有状态的协议，它并不知道是那个客户端在访问应用。所以在客户端发起对身份有要求的请求中，需要携带认证信息。

cookie可以在每次发送HTTP请求的时候传递给服务器端，所以可用cookie存储会话状态，在其中可以保存一些相关数据

  • 可以保存用户喜好或者保存用户名密码
  • 保存当前会话在服务器的唯一ID(session ID)

但是需要注意，为了不在传输cookie的过程中耗费太多网络资源，有最大4KB的大小限制

若被禁用，则可以使用URL重写、表单隐藏字段等方法，婉转实现

# token

token认证机制主要使用在stateless的rest API调用中，一般我们会在用户登录成功后,在本地保存服务器生成的token，用作之后用户进行相关权限活动的证明，保证了登录状态的持续性

在安全性方面，为了防止token的盗用，可以将请求URL、时间戳、token三者进行合并加盐签名，在服务端校验有效即可

# session

在这里，我们首先要了解清楚，session的实现和session的区别

  • session 是一个抽象概念，开发者为了实现中断和继续等操作，将 user agent 和 server 之间一对一的交互，抽象为“会话”，进而衍生出“会话状态”，也就是 session 的概念
  • 而我们今天常说的 session，是为了绕开 cookie 的各种限制，通常借助 cookie 本身和后端存储实现的，一种更高级的会话状态实现

那我们这里主要讲的是session的实现中的，cookie与session的异同

# 特点

  • cookie在客户端，session在服务端
  • cookie安全性较低，不可将机密数据不加密存在cookie中
  • session访问量大时，会占用内存，影响性能

# Web Storage

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

# localStorage

是 HTML5 的本地存储，将数据保存在客户端中（一般是永久的)

  • 添加键值对：localStorage.setItem(key,value)
  • 获取键值：localStorage.getItem(key)
  • 删除键值对：localStorage.removeItem(key)。
  • 清除所有键值对：localStorage.clear()。
  • 获取localStorage的属性名称（键名称）：localStorage.key(index)。

# Taobao的妙用

第一次访问后，使用localStorage存储base64处理后的图片地址，节约二次请求时消耗的服务器资源

# sessionStorage

它与 localStorage 相似，不同之处在于 localStorage 里面存储的数据没有过期时间设置，而存储在 sessionStorage 里面的数据在页面会话结束时会被清除

// 保存数据到sessionStorage
sessionStorage.setItem('key', 'value');

// 从sessionStorage获取数据
var data = sessionStorage.getItem('key');

// 从sessionStorage删除保存的数据
sessionStorage.removeItem('key');

// 从sessionStorage删除所有保存的数据
sessionStorage.clear();
1
2
3
4
5
6
7
8
9
10
11

# IndexDB

IndexedDB 是一个用于在浏览器中储存较大数据结构的 Web API, 并提供索引功能以实现高性能查找. 像其他基于 SQL 的 关系型数据库管理系统 (RDBMS) 一样, IndexedDB 是一个事务型的数据库系统. 然而, 它是使用 JavaScript 对象而非列数固定的表格来储存数据的

用得比较少，之后如果用到会回来补充的

# 用法不同

  • cookie:
    • cookie是网站为了标示用户身份而储存在用户本地终端（Client Side）上的数据（通常经过加密）。
    • cookie数据始终在同源的http请求中携带（即使不需要），记会在浏览器和服务器间来回传递。
  • sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存

# 存储大小

  • cookie数据大小不能超过4k
  • sessionStorage和localStorage 虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大

# 有效时间

  • localStorage 存储持久数据，浏览器关闭后数据不丢失除非主动删除数据
  • sessionStorage 数据在当前浏览器窗口关闭后自动删除
  • cookie 设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭

# 作用域不同

  • sessionStorage不在不同的浏览器窗口中共享，即使是同一个页面
  • localStorage 在所有同源窗口中都是共享的
  • cookie也是在所有同源窗口中都是共享的

前端方面常见的存储方式就这么多，才疏学浅，欢迎读者提出建议

← 性能优化 →