[toc] # 本地存储 ## 什么是本地存储？ 将数据存储在本地，本地一般指浏览器、手机等客户端设备。 ## Cookie、localStorage、sessionStorage 的区别？和用法？ 1. 历史 Cookie 是传统的本地存储的技术。 localStorage 和 sessionStorage 是 H5 中新加的。 2. 特点 Cookie：数据保存在浏览器中，一般每个 Cookie 最大 4K，可以设置过期时间 localStorage 和 sessionStorage：存储数据比较大，一般5M。 sessionStorage ：关闭浏览器，数据就删除 localStorage：除非手动删除，否则数据永远存在 3. 操作方式 Cookie 操作起来比较麻烦，只能通过 document.cookie 来对整个 cookie 进行操作，整个 cookie 是一个字符串。 localStorage 和 sessionStorage 操作方便，可以使用： localStorage.setItem(键，值） 添加数据 localStorage. getItem(键） 获取数据 localStorage.removeItem(键） 删除一个数据 localStorage. clear() 清空 4. 存储对象 本地存储时不能直接保存对象类型的数据，需要先序列化然后才能存储，取出来使用时要先返序列化。 ## 什么是序列化和反序列化？ 序列化：根据一个规则将对象转成了个字符串。 返序列化：将序列化的字符串转回对象。 序列化和反序列化使用 JSON.stringify 和 JSON.parse 方法 ~~~ // 对象类型数据 const o = {name:'tom'} // 序列化成字符串（本地存储时需要先转） const str = JSON.stringify(o) // 反序列化回对象（使用时需要转回） const o1 = JSON.parse(str) ~~~