WEB浏览器中的本地存储数据库

前言

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

localStorage

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

生命周期

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

设置本地存储的键与值

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

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

获取本地存储的值

const myJujin = localStorage.getItem('myJujin');

删除指定键的本地存储

localStorage.removeItem('myJujin');

删除该站点所有的本地存储

localStorage.clear();

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

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中，这样子会比较好一些

这篇好文章是转载于：学新通技术网