为了提升用户的体验感，直接在客户端存储信息的需求也随之增加。无论是实现自动登录，个人偏好，换肤功能等，都能使用客户端存储来实现。本文将介绍Web客户端常见的几种存储方式，将结合实际应用场景进行分析，以及相关代码分享 先上图，本文知识归纳
1. Cookie
Cookie 是一些数据， 存储于电脑上的文本文件中。在HTML5到来之前，cookie是主要的存储方式。
对于cookie的历史由于学识过浅就不过多讨论 😔
1.1 Cookie的限制
因为cookie存储在客户端的机器中，所以为了保证它不被恶意利用，浏览器会加以限制，只要遵守下列规则就不会有什么问题
不超过300个cookie
每个cookie不超过4096字节，也就是4k
每个域不超过20个cookie
每个域不超过81920字节
每个域能设置的cookie总数也是受限的，但不同浏览器的限制不同
注意：当cookie总数超过了单个域的上限，浏览器就会删除之前设置的cookie
1.2 cookie的构成
cookie在浏览器中是由以下参数构成的
名称：cookie名不区分大小写，因此myCookie和MyCookie是同一个名称。不过，实践中最好将cookie名当成区分大小写来对待，不仅提高代码的可读性，同时避免一些不必要的误会
值：存储在cookie里的字符串值
域：domain表示的是cookie所在的域， 默认cookie的域是当前域名。
路径：请求URL 中包含这个路径才会把 cookie发送到服务器，例如：指定cookie路径为http://www.baidu.com/my/ljc 则http://www.baidu.com/my/下的页面就不会发送cookie
过期时间：表示什么时间删除cookie，即不再发送到服务器。默认情况下浏览器会话结束后会删除所有cookie。不过，可以设置删除cookie的具体时间，这样即使关闭浏览器cookie也会保存在用户的本机上。把过期时间设置为过去的时间就可以实现删除cookie
安全标志：只在使用SSL安全连接的情况下才会把cookie发送到服务器。例如，https请求就能发送ccokie，而http请求则不会，添加secure字样即可开启
这些参数在使用中使用分号隔开
1.3 JavaScript中cookie的使用
这里将结合自动登录功能来谈论，将经过4个步骤，设置cookie，获取cookie，移除cookie，以及初始化操作
1.3.1 设置cookie
function setCookie() { let date = new Date(); date.setTime(date.getTime() + 30 * 24 * 60 * 60 * 1000); document.cookie = 'username=' + valId.value + ';path=/;expires=' + date.toGMTString();//用户名 document.cookie = 'psd=' + valPsd.value + ';path=/;expires=' + date.toGMTString();//密码 }
在上面的代码中，设置了名为username和psd的cookie，设置了path在任何路径下可以访问，过期时间为30天，
注意：这里会有8小时的误差，原因是浏览器时间为当前所在地区的时间，而代码中通过toGMTString转化后的时间是格林威治时间，北京处于东八区，所以时间会早8小时，如果化为准确的30天的话，加8小时即可~
注意：在保存账号密码时可以进行加密处理
1.3.2 移除cookie
在前面也有说到，当当前时间超过了cookie的过期时间，cookie就会自动的被清除，我们就利用这个特性来实现移除cookie的功能
function removeCookie() { let date = new Date(); date.setTime(date.getTime() - 60 * 60 * 1000);//过去的时间 document.cookie = 'username=path=/;expires=' + date.toGMTString(); document.cookie = 'psd=;path=/;expires=' + date.toGMTString(); }
在上面的代码中，重点留意第三行，通过重新设置时间戳，使得过期时间为过去的时间，这样cookie就自动的被清除了。
注意：当我们在设置同名的cookie时，会覆盖先前的cookie，从而实现了移除cookie的功能
1.3.3 获取cookie值
获取cookie的操作比较复杂，JavaScript中没有太多的API给我们去操作cookie，只有BOM中的document.cookie属性。相信都不会陌生吧，当它作为键存在时可以用于设置cookie。当作为值被调用时，可以返回当前地址下的所有cookie，为字符串类型
注意：存在多个cookie一起返回时，用; 隔开。name1=value1;name2=value2，因此获取cookie值要经历以下几步
利用字符串中split方法，将返回的字符串通过;标识符进行分割返回数组
再通过遍历分割好的cookie数组，逐一判断需要获取的cookie名，最后再通过处理数组值从而得到cookie值。
function getCookie(cookieName) { cookieName += '='; let cookieList = document.cookie.split(';'); for (let i = 0; i < cookieList[i].length; i++) { let cookieItem = cookieList[i].trim(); //去除空格 if (cookieItem.indexOf(cookieName) != -1) { return cookieItem.substring(cookieName.length, cookieItem.length) } } }
在代码中出现了很多数组，字符串的API，下面我们来一个个分析以下 在第4行中，字符串APIsplit，这个方法的作用是，通过特定的标识符对字符串进行分割，返回分割好的数组，例如：
let str = "How=are;you=doing"; let n = str.split(";"); console.log(n);// ["How=are", "you=doing"]
在第5行中使用到了trim方法，用于去除首尾的空格，避免空格对后面处理值造成影响
在第6行中使用到了字符串方法indexOf，用于查找字符串中是否存在我们需要的获取的cookie名，找得到返回值就为首次出现的索引，否则为-1
inedxOf方法可返回某个指定的字符串值在字符串中首次出现的位置。如果没有找到匹配的字符串则返回 -1。
在第7行中使用了字符串的方法substring，改方法用于切割字符串，要传入两个参数，切割的初始位置和末位置
1.3.4 初始化操作
有了前面的铺垫，这里就比较轻松了，我们只需要判断以下当前地址下的cookie中是否存在，用户名和密码，如果存在，我们就为他们进行自动登录，这一步一般放在代码的最前面，用户打开页面就先判断
function initData() { if (getCookie('username') && getCookie('psd')) { //需要进行的操作 } }
注意：这里可能有人会有疑问，只要有用户名密码就好了吗？
我的答案是：是的，因为我们可以在用户登录的时候，只有用户成功登录了，我们才会为它设置cookie，所以，不用担心密码错误的问题。
以上就是JavaScript中操作利用cookie实现自动登录的实现过程，设置，获取，移除
对cookie的限制及特性决定了cookie并不是存储大量数据的理想方式。因此，其他客户端技术出现了
注意：不要在cookie中存储重要或敏感信息，cookie的数据保存并不是在安全的地方。
2. Web Storage
在HTML5中引进了两种存储方式sessionStorage和localStorage。web Storage的目的解决通过客户端存储不需要频繁发送回服务器的数据时使用cookie的问题。
localStorage和sessionStorage存储在用户本地的浏览器上，不像cookie一样携带在http请求头部的字段中，有效的避免了性能问题。localStorge同样也采用了同源策略对存储的容量进行了限制，大多数设置限制为同一域名5M的存储空间。
这里重点讲本地存储，临时存储的方法相同
注意：两种方式存储的值都只能是==字符串==的形式
2.1 localStorage对象
localStorage：没有时间限制，持续范围超过当前会话，浏览器关闭再打开数据依然是可用的（注意是同一域名下）
localstorage的存储方式是以==key-value==的形式进行存储的，首先我们先了解以下其中的操作方法
localstorage.length：获取当前存储中的键值对数量
localstorage.key(index)：得到某个索引的键值
localstorage.getItem(key)：读取对应键值的数据
localstorage.setItem(key,value)：设置对应的键值对，保存数据
localstorage.remove(key)：清除某个指定数据
localstorage.clear()：清除存储的所有数据
2.1.1 小demo
接下来先实现一个简单的保存查找功能，有以下
保存用户的名称，以及拥有的金钱数量
通过用户名查询到对应的金钱数量
代码实现
function set() { let myName = document.querySelector('#myName').value;//获取需要保存的用户名 let money = document.querySelector('#money').value;//金钱数量 localStorage.setItem(myName, money);//保存 }
首先当我们需要进行保存数据时，我们会调用set函数，通过获取当前的需要保存的数据，直接进行保存
function find() { let searchName = document.querySelector('#searchName').value; let youMoney = localStorage.getItem(searchName); let findEnd = document.querySelector('#findEnd');//页面上的渲染位置 findEnd.innerHTML = youMoney; }
当我们需要获取用户的金钱数时，我们调用find方法，先确定需要获取的人是谁，再通过getItem方法获取本地存储中的键值，再渲染到页面上。 这样我们就实现了一个简单的本地存储，如果需要进行其他的操作，像删除本地存储这些，这里示例删除数据 删除指定数据
//delete localStorage.myName; localStorage.removeItem(myName)
有两种方法能够实现删除的操作，使用delete 和removeItem删除指定的数据
其他的就不过多赘述了，方法一样。
从上面的操作中我们会发现我们需要新建过多的存储信息，每一个用户信息都我们要为他们新创建一个本地存储，更多情况下我们存储的数据会更复杂，这样的方法就会变的更加的麻烦
就像图片中的这样，这样的方式并不是友好的，因此我们需要优化它。 2.1.2 对象存储方式 在需要对单个用户的大量信息进行存储时，我们可以采用对象存储方式进行存储，将一个用户的姓名，年龄，性别等信息，存入对象中再保存
let user = { username: 'ljc', age: '20', sickName : '小猴', sex : '男' } user = JSON.stringify(user) localStorage.setItem('my', user);
由于只能存储字符串类型的数据，我们采用JSON.stringify方法将对象转化为字符串，存储结果的value为：
{"username":"ljc","age":"20","sickName":"小猴","sex":"男"}
这样我们就实现了我们想要的操作。
当我们需要存储更多的用户数据时，而不单单是一个用户数据时，我们可以继续在上面的代码中优化，我们可以将用户数据存放于数组中，在使用JSON.stringify将数组转化为字符串，从而实现，在上面代码的基础上进行修改
let userArr = [] userArr.push(user) userArr = JSON.stringify(userArr)
下面我们来看看储存结果
[{"username":"ljc","age":"20","sickName":"小猴","sex":"男"}]
可以看到现在的value中存放的是一个数组，我们可以通过push方法继续的追加用户信息，从而实现了想要的优化
在我们获取本地存储的数据时，需要将获取数据经过JSON.parse转化为对象再使用
2.2 sessionStorage对象
又叫临时存储，顾名思义只是暂时存储，在浏览器会话窗口关闭后，会全部清除
操作方法和localStorage完全一致，就不过多阐述
3.几者的区别
cookie在每次请求时都会被发送到服务器，这样会浪费带宽
cookie中的操作方法需要自己封装，web storage中有setItem，getItem等方法
cookie能够与服务器端交互，web Storage只是将数据保存在本地
存储数据的大小限制不一样，cookie一般4k，web Storage一般5M
数据的生命周期不一致，cookie能设置时间，本地存储是永久性的，临时存储可以说是一次性的
作用域不同，sessionStorage不在不同的浏览器窗口中共享，localstorage和cookie在所有同源窗口中都是共享的
