将数据存储在客户端（浏览器）有很多好处，其中最重要的是可以快速访问（web）数据。（过去）客户端有五种数据存储方式，目前常用的只有四种（其中一种已经废弃）：CookiesLocalStorageSessionStorageIndexedDBWebSQL（废弃）Cookiesstring最典型的方式数据。一般来说，cookie是由服务器发送给客户端，由客户端存储，然后在后续的请求中发回给服务器。这可用于管理用户会话、跟踪用户信息等。此外，客户端还使用cookie来存储数据。因此，cookies常被用来存储一些通用数据，例如用户设置。Cookies的基本CRUD操作通过下面的语法，我们可以创建、读取、更新和删除cookies://Createddocument.cookie="user_name=IreAderinokun";document.cookie="user_age=25;max-age=31536000;secure";//Read(All)console.log(document.cookie);//Updateddocument.cookie="user_age=24;max-age=31536000;secure";//Deletedocument.cookie="user_name=IreAderinokun;expires=Thu,01Jan197000:00:01GMT";Cookies的优点可以用来和服务器通信当cookie快要自动过期时，我们可以重置而不是删除Cookies缺点是增加了文件传输的负载只能存储少量数据只能存储字符串潜在的安全问题由于WebStorageAPI（Local和SessionStorage），不再推荐使用cookies来存储数据浏览器支持所有主流浏览器都支持Cookies.LocalStorageLocalStorage是一种在浏览器端存储键值对的WebStorageAPI。LocalStorage被认为是替代Cookies的解决方案，因为它提供了更直观和安全的API来存储简单数据。从技术上讲，虽然LocalStorage只能存储字符串，但它也可以存储字符串化的JSON数据。这意味着LocalStorage可以存储比Cookie更复杂的数据。LocalStorage的基本CRUD操作通过下面的语法，我们可以创建、读取、更新和删除LocalStorage://Createconstuser={name:'IreAderinokun',age:25}localStorage.setItem('user',JSON.stringify(user));//Read(Single)console.log(JSON.parse(localStorage.getItem('user')))//UpdateconstupdatedUser={name:'IreAderinokun',age:24}localStorage.setItem('user',JSON.stringify(updatedUser));//DeletelocalStorage.removeItem('user');LocalStorage相对于Cookies的优点：提供了更直观的界面，更安全的存储数据，可以存储更多的数据LocalStorage缺点：只能存储字符串数据（直接存储数组/对象等复合数据类型会转换成字符串，访问数据时会出现不一致的情况：localStorage.setItem('test',1);console.log(typeoflocalStorage.getItem('test'))//"string"localStorage.setItem('test2',[1,2,3]);console.log(typeoflocalStorage.getItem('test2'))//"string"console.log(localStorage.getItem('test2'))//"1,2,3"localStorage.setItem('test3',{a:1,b:2});console.log(typeoflocalStorage.getItem('test3'))//"string"console.log(localStorage.getItem('test3'))//[对象对象]"//避免访问数据不一致，存储复合数据类型时序列化，读取时反序列化localStorage.setItem('test4',JSON.stringify({a:1,b:2}));console.log(typeoflocalStorage.getItem('test4'))//"string"console.log(JSON.parse(localStorage.getItem('test4')))//{a:1,b:2}浏览器支持IE8+/Edge/Firefox2+/Chrome/Safari4+/Opera11.5+(caniuse)SessionStorageSessionStorage是另一种WebStorageAPI，与LocalStorage非常相似，不同的是SessionStorage只存储当前会话页面（标签页）数据，一旦用户关闭当前页面或浏览器，数据自动清除。SessionStorage的基本CRUD操作通过下面的语法，我们可以创建、读取、更新和删除SessionStorage://Createconstuser={name:'IreAderinokun',age:25}sessionStorage.setItem('user',JSON.stringify(user));//Read(Single)console.log(JSON.parse(sessionStorage.getItem('user')))//UpdateconstupdatedUser={name:'IreAderinokun',age:24}sessionStorage.setItem('user',JSON.stringify(updatedUser));//DeletesessionStorage.removeItem('user');优缺点和浏览器支持同LocalStorageIndexedDBIndexedDB是一个更复杂更全面的客户端数据存储解决方案，它基于JavaScript，面向对象和基于数据库，可以存储数据和检索键索引数据非常简单地。在构建渐进式Web应用一文中，我介绍了如何使用IndexedDB创建离线优先应用程序。IndexedDB的基本CRUD操作注意：在示例中，我使用了Jake的Archibald的IndexedDBPromised库，它提供了Promise风格的IndexedDB方法。使用IndexedDB在浏览器端存储数据比上面提到的其他方法更复杂。在我们可以创建/读取/更新/删除任何数据之前，我们首先需要打开数据库并创建我们需要的存储（类似于在数据库中创建表）。functionOpenIDB(){returnidb.open('SampleDB',1,function(upgradeDb){constusers=upgradeDb.createObjectStore('users',{keyPath:'name'});});}创建或更新存储中的数据://1.OpenupthedatabaseOpenIDB().then((db)=>{constdbStore='users';//2.Openanewread/writetransactionwiththestorewithinthedatabaseconsttransaction=db.transaction(dbStore,'readwrite');conststore=transaction.objectStore(dbStore);//3.Addthedatatothestorestore.put({name:'IreAderinokun',age:25});//4.Completethetransactionreturntransaction.complete;});检索数据：//1.OpenupthedatabaseOpenIDB().then((db)=>{constdbStore='users';//2.Openanewread-onlytransactionwiththestorewithinthedatabaseconsttransaction=db.transaction(dbStore);conststore=transaction.objectStore(dbStore);//3.Returnthedatareturnstore.get('IreAderinokun');}).then((item)=>{console.log(item);})删除数据：//1.OpenupthedatabaseOpenIDB().then((db)=>{constdbStore='users';//2.在数据库中打开一个新的读/写事务withthestorewithinthedatabaseconsttransaction=db。transaction(dbStore,'readwrite');conststore=transaction.objectStore(dbStore);//3.删除传入keystore对应的数据.delete('IreAderinokun');//4.完成transactionreturntransaction.complete;})如果你有兴趣了解更多关于IndexedDB的使用，你可以阅读我关于如何在ProgressiveWebApplication(PWA)中使用IndexedDIndexedDB的文章。使用IndexedDIndexedDB的优点是可以处理更复杂和结构化的数据。每个'数据库'可以有多个'数据库'和'表'更大的存储空间对其进行更多的交互控制。IndexedDB的缺点是比WebStorageAPI更难应用。浏览器支持IE10+/Edge12+/Firefox4+/Chrome11+/Safari7.1+/Opera15+（caniuse）对比参考客户端存储概述（https://bitsofco.de/an-overview-of-client-侧存储/)
