前端的几种数据存储方式

什么是前端数据存储？

客户端存储是快速为一个应用进行性能优化的绝佳方法。通过把数据存储在浏览器中，用户不必每次都向服务器请求获取同一个信息。在你离线时，使用本地存储的数据而不是向远端服务器上请求数据就显得非常有用，甚至在线用户也可以从中受益。客户端存储可以通过这些技术来实现：cookie 、sessionstorage、localstorage（H5 存储 Web Storage ）。

一、cookie

1、cookie 的作用

cookie 是比较老的前端缓存技术，使用 cookie 必须要有服务器（HTML 静态网页无效），存储的大小限制在 4k。为什么要有服务才能使用 cookie 呢？因为 cookie 是要在服务器和浏览器来回输送的，由于浏览器的的跨域限制，客户端和服务端必须保证是同源策略（也就是跨域）。而且 cookie 是存放在前端的，安全一直以来是个问题，适合使用一些会话信息传输。

2、cookie 的构成

一般来说，cookie 是有浏览器保存的以下几块信息构成的。

1.名称：cookie 名称，是个唯一值。
2.值：存储在 cookie 中的字符串值，值必须被 URL 编码。
3.域：cookie 对于哪个域是有效的，所有向该域发送的请求都会包含这个 cookie 信息。
4.路径：对于指定域中的路径，应该向服务器发送 cookie。
5.失效时间：表示 cookie 何时应该被删除的时间戳。
6.安全标志：指定后，cookie只有在使用SSL连接的时候才发送到服务器。

3. cookie 存储和获取

// 设置 cookie
function setCookie(name,value,options={}){
    let cookieData = `${name}=${value};`;
    for(let key in options){
        let str = `${key}=${options[key]};`;
        cookieData += str;
    };
    document.cookie = cookieData;
};

// 获取 cookie
function getCookie(name){
    let arr = document.cookie.split("; ");
    for(let i =0;i<arr.length;i++){
        let arr2 = arr[i].split("=");
        if(arr2[0]==name){
            return arr2[1];
        };
    };
    return "";
};

Web 存储机制

二、什么是 Web 存储？

Web Storage 是一种在客户端存储数据的一种机制，主要的目的是为了克服由 cookie 带来的一些限制， 当数据需要被严格控制在客户端上时，无须将数据在客户端和服务器之间来回的进行传送，并且可以存储 5M 的跨会话信息。

sessionStorage

1.什么是 sessionStorage?

sessionStorage 对象是存储特定于某个会话的数据，也就是数据只保存到浏览器关闭后消失，存储在 sesstionStorage 中的数据可以跨页面刷新而存在。

2.sessionStorage 的特点

• 同源策略限制，若想在同一个页面之间对同一个 sessionStorage 进行操作，这些页面必须是同协议、域名、端口号。

• 单标签页限制，sesstionStorage 操作限制在单个标签页中，在此标签页进行同源页面访问都可以共享 sesstionStorage 数据。

• 只在本地存储，seesionStorage 的数据不会跟随HTTP请求一起发送到服务器，只会在本地生效，并在关闭标签页后清除数据。

• 存储方式，seesionStorage 的存储方式采用 key、value 的方式。

• 存储上限限制，不同的浏览器存储的上限也不一样，但大多数浏览器把上限限制在 5MB 以下。

3.sessionStorage 的用法

sessionStorage.length  // 获取 storage 的个数
sessionStorage.key(n)  // 获取 storage 中第 n 个元素对的键值
sessionStorage.getItem(key)  // 获取 key 对应的值
sessionStorage.key    // 获取键值 key 对应的值
sessionStorage.setItem(key, value)  // 添加数据，键值为 key，值为 value
sessionStorage.removeItem(key)  // 移除键值为 key 的值
sessionStorage.clear()  // 清除所有数据

localStorage

1.什么是 localStorage?

localStorage 对象是存储特定于某个会话的数据，与 sessionStorage 不一样的就在于， localStorage 存储是持久的，不通过手动清除的话，就会一直存在与客户端。

2.localStorage 的特点

• localStorage 会将第一次请求的数据直接存储在本地，可以存储 5M 数据，相比于 cookie 可以解决带宽，但只有高版本浏览器中才支持。

• 目前所有浏览器都会把 localStorage 的值类型限定为 string 类型，对于我们比较常见的 JSON 对象类型需要转换。

• localStorage 本质上是对字符串的读取，如果存储内容多的话会小号内存空间，导致页面变卡。

3.localStorage 的用法

localStorage.length //获得storage中的个数
localStorage.key(n)    //获得storage中第n个元素对的键值（第一个元素是0）
localStorage.getItem(key)    //获取键值key对应的值
localStorage.key    //获取键值key对应的值
localStorage.setItem(key, value)    //添加数据，键值为key，值为value
localStorage.removeItem(key)    //移除键值为key的数据
localStorage.clear()    //清除所有数据