前端面试题——三种本地存储策略的区别

顾名思义，前端的本地存储，就是将一些数据存储在浏览器本地。这些数据可能是从服务器端获取到的数据，也可能是在多个页面中需要频繁使用到的数据

举个栗子，在一个项目中，我们需要经常使用到用户的基本信息，如果没有本地存储的话，我们不得不每次需要时去请求接口；但是有了本地存储，我们就可以在第一次请求接口时，将获取到的数据存储在本地，之后需要时即取即用，减少了大量额外的接口请求

那么前端常用的三种本地存储策略是什么呢？

1. cookie
2. sessionStorage
3. localStorage

cookie

在 h5 之前，本地存储的主要方式就是 cookie ，cookie可以实现少量数据的存储。为什么是少量？因为 cookie 有 4k 的限制，没办法存储数据量较大的数据

cookie 的使用

获取 cookie 可以直接使用 document.cookie ，但是获取到的 cookie 是一个字符串，它包含了 cookie 中存储的所有数据，形式如 "key1=value1; key2=value2" ，这样的字符串无法通过 JSON.parse() 转换为 json 格式的数据，需要通过正则表达式的方式将所需要的值匹配出来，直接使用比较复杂

但是好在有大量的库可供我们更方便快捷得操作 cookie ，下面就介绍一下 jQuery.cookie.js 的使用方式

jQuery.cookie.js

$.cookie()

上面这个方法为最常使用的方法之一，依靠传入参数的个数可以实现 写入、读取 cookie，另一个是 $.removeCookie( ‘key’ )， 移除一个 cookie

• 第一个参数：key

字符串，值为要保存的键，当只传入这个参数时，会返回对应键的值，如果当前 cookie 中不存在这个键，则返回空

• 第二个参数：value

字符串，为要保存的数据，当传入两个参数时，如果当前的 key 存在，会修改旧值为新值，不存在则创建新的 cookie

• 第三个参数：config

对象类型，为参数配置，可以在这个参数中配置一些 cookie 的有效期、domain、路径等

常用的配置属性有以下几个：

expires：数字或日期对象，表示这个 cookie 的有限期限，如果不设置，将会在退出浏览器时被删除
path：字符串，定义cookie的有效路径，默认值 ‘/’ 表示当前整个网站都可以访问该 cookie
domain：字符串，默认值为创建 cookie 的网页所拥有的域名，只有在该域名下的网页才可以使用
secure：布尔值，默认值为 false，如果为 true ，cookie 的传输需要使用安全协议（HTTPS）
raw：布尔值，默认值为 false，默认情况下，读取和写入 cookie 的时候会自动进行编码和解码（使用encodeURIComponent 编码，decodeURIComponent 解码），要关闭这个功能设置 raw: true 即可

cookie 的缺点

除了上面说的只能存储 4k 的数据以外，浏览器在发起请求时，也会将其带在请求头上，污染主domain的同时又增加了用户使用的流量（虽然很少）

那么为了解决 cookie 上面的两个问题，h5 引入了两个新的方式来进行本地存储

sessionStorage

sessionStorage 的使用相对 cookie 来说就会简单很多，并不需要使用正则也不需要借助第三方库

sessionStorage 是一个全局对象，数据以键值对的方式进行存储，所以它的使用方式与普通对象非常相似，可以直接通过中括号 sessionStorage[‘key’] 的方式添加和获取数据，也可以通过点语法 sessionStorage.key 的方式进行操作，sessionStorage 也有自己的 api 用于操作数据

/**
 * 向 sessionStorage 中添加一条数据
 * @param key {string} 键
 * @param value {string} 值
 */
sessionStorage.setItem( key, value ) 

/**
 * 在 sessionStorage 中读取一条数据
 * @param key {string} 键
 * @return {string|null} 存在返回值，不存在返回 null，需要注意的是如  果使用点语法和中括号，不存在时返回 undefined
 */
sessionStorage.getItem( key ) 

 * 在 sessionStorage 中移除一条数据
 * @param key {string} 键
 */
sessionStorage.removeItem( key ) 

 * 在 sessionStorage 中移除所有
 */
sessionStorage.clear() 

sessionStorage 中只能够保存字符串类型的数据，所以在保存非字符串类型的数据时，一定要先将其转换成字符串，比如图片可以转换成 base64 字符串后保存，对象可使用 JSON.stringify() 转为字符串后存储，甚至可以存储一段 js 脚本

sessionStorage 的缺点

sessionStorage 中存储的数据不会被自动随着请求被发送到服务端，可存储的数据大小相比 cookie 来说大了很多，但是每个浏览器都不同，所以没有一个统一的值。其中所存储的数据的生命周期与 session 类似，即只存在于一个会话周期内，当浏览器关闭或标签页关闭时，数据即会被删除（前进和后退并不会影响到数据，因为还在当前的会话中），这就导致了即便是同一个网站，但在不同的标签页和窗口内，也无法共享其中存储的数据

localStorage

localStorage 可以说是相对完美的解决了上面两种存储方式的缺点

1. 数据存储量大
2. 不会被发送到服务端
3. 持久化本地存储，除非手动删除，否则一直存在
4. 在同一个域下，所有窗口共享其中存储的数据

localStorage 的使用方式和特点与 sessionStorage 几乎一样，在此就不赘述

三种存储方式共同的缺点

看到这里你一定会发现，上文中的三中存储方式都只能存储字符串类型或者可转为字符串的简单数据，并不适合用来存储复杂的关系型数据，但是 h5 为我们提供了一个新的 api —— Web SQL Database

但是本文并不会对Web SQL Database进行讲解，因为大部分前端工程师对于 SQL 语句并不熟悉，使用起来有一定的难度，而上文中的三种方式也已经基本能够满足我们本地存储的需求

微信公众号.jpg