三种本地存储策略的区别

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

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 的缺点

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

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

sessionStorage

向sessionStorage中添加一条数据

sessionStorage.setItem( key, value ) 

从sessionStorage中获取一条数据

sessionStorage.getItem( key) 

在sessionStorage中移除一条数据

sessionStorage.removeItem( key ) 

清除所有sessionStorage

sessionStorage.clear() 

sessionStorage 的缺点

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

 

localStorage

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

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

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

三种存储方式共同的缺点

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

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