👻👻WEB中的本地存储，你知道吗

这是我参与更文挑战的第3天，活动详情查看：更文挑战web

前言

现代web浏览器提供了不少在用户电脑web客户端存放数据的方法它把数据长时间保存在你的电脑中, 在实际开发中不少时候会用到它，场景例如：,保留用户对应用个性化配置。本文章将分为 localStorage、sessionStorage这两个部分，简单的介绍以及咱们如何使用它chrome

localStorage

它是在HTML5中新加入的成员，localStorage，这个成员主要是用来做为本地存储来使用的，它解决了cookie存储空间的问题（每一个cookie的内容最高不能超过4K），能够说成它是cookie的进化版，localStorage也是有空间限制的，例如谷歌浏览器（chrome）每一个域名的容量是5M大小。数组

生命周期

localStorage的生命周期是永久性的。即便关闭浏览器，数据也不会被清空，须要主动去销毁。浏览器

设置本地存储的键与值安全

若是存储的数据是object、array，咱们须要先使用JSON.parse，把数据转成JSON对象，再使用JSON.stringify这个方法把JSON转换成string存放到localStorage中bash

localStorage.setItem('myJujin', 'https://juejin.cn/user/2858385965322935');
复制代码

获取本地存储的值markdown

const myJujin = localStorage.getItem('myJujin');
复制代码

删除指定键的本地存储cookie

localStorage.removeItem('myJujin');
复制代码

删除该站点全部的本地存储session

localStorage.clear();
复制代码

在浏览器中，打开开发者工具中的application，咱们找到storage这一项并展开，咱们能够看到当前站点所存储的本地数据app

localStorage浏览器兼容性

localStorage的一些优势

解决了cookie的大小限制
能够长期的存放数据，不会被清除
同个域名下数据能够互相访问

localStorage的一些缺点

每一个浏览器对localStorage的限制不一致
须要IE8以上的IE浏览器才支持localStorage该特性
存储的值只能是string类型，不能直接存储对象，数组。一般咱们会将数据转换为JSON类型存放进去
若是数据量过大的话，页面会出现卡顿
localStorage在浏览器的隐私模式下没法读取

sessionStorage

sessionStorage相似与上面说到的localStorage特性，一样是用来存储用户端临时信息的对象，区别在于localStorage是持久化保存数据，即关闭浏览器数据也不会被清空，而sessionStorage只是会话级别的存储，也就是说若是当前页面的seesionStorage存储有数据，你把标签页关闭了那么session的数据也会被销毁掉

生命周期

sessionStorage 的生命周期是仅在当前浏览器标签页关闭前有效，不能持久保持。在标签页或者浏览器未关闭前，其数据一直都是存在的。存储大小通常为5M。

设置会话存储的键与值

和localStorage同样，若是存储的数据是object、array，咱们须要先使用JSON.parse，把数据转成JSON对象，再使用JSON.stringify这个方法把JSON转换成string存放到sessionStorage中

sessionStorage.setItem('myJujin', 'https://juejin.cn/user/2858385965322935');
复制代码

获取会话存储的值

const myJujin = sessionStorage.getItem('myJujin');
复制代码

删除指定键的会话存储

sessionStorage.removeItem('myJujin');
复制代码

删除该站点全部的会话存储

sessionStorage.clear();
复制代码

在刷新页面sessionStorage不会清除，可是打开同域新页面访问不到

它和localStorage同样，咱们能够经过浏览器的开发者工具看到当前页面存储的session数据

sessionStorage兼容性

sessionStorage的一些优势

解决了cookie的大小限制
在不一样的窗口之下的sessionStorage存储相互独立，互不干扰

sessionStorage的一些缺点

每一个浏览器对sessionStorage的限制不一致
须要IE8以上的IE浏览器才支持localStorage该特性
存储的值只能是string类型，不能直接存储对象，数组。一般咱们会将数据转换为JSON类型存放进去
若是数据量过大的话，页面会出现卡顿
sessionStorage在浏览器的隐私模式下没法读取

关于安全问题

切勿将敏感数据存放在sessionStorage和localStorage存储中，由于它们在本地很容易被篡改，使用它们的时候，咱们还须要时刻注意是否有存在XSS注入的风险！

总结

它们都是一种数据存储的方式，sessionStorage和localStroage基本是同样的，而localStorage会一直保存数据，若是你的应用不须要持久保存数据，只须要当前用户一次性使用的数据，用完这一次就能够丢弃掉的，那么你能够将它存放在sessionStorage中，这样子会比较好一些