[TOC]前端数据存储
前端数据存储一种在前端保存数据的思想。第一次在某个地方保存数据,那么从第二次就可以直接使用了。那么从一下几个方面简单介绍几种主流的存储方式的特性和区别
作用域
LocalStorage 的作用域为同一站点。这样有一个特点,无论你打开多少个标签页 存储的数据在另一个标签页都是可以获取的。
SessionStorage 的作用域为 同一站点 并且 同一标签页 。看到这里或许你会说它没有了 LocalStorage 的优势,那你可就错了。他们的特点并非优势,在不同的场景他们发挥着各自的作用。例如我们存的用户登录信息 如果是使用 LocalStorage ,那么当用户登录后保存一次 当用户打开新标签页再登录另一个号,之类保存的用户信息就被覆盖,在第一次登录的标签页种 可能就会有数据窜流。当然解决的办法有很多,这里只简单引出一种容易犯错的场景。
cookie 的作用域为同一domain 并且 同一path。cookie设置的时候可以设置domain和path。默认domain为请求地址 path为根路径。
RAM 没有一个确定的作用域,例如 在js中 他可能是一个页面的全局变量,可能是一个代码块的一个局部变量等等。
生命周期
SessionStorage:标签页关闭销毁LocalStorage/File:永久cookie:直到失效期RAM:直到内存重新释放
由于有的方式 用以上维度来作对比 不能突显特性 下面我们提出来再额外聊聊
other
webFile 调用 web api 读写设备中的文件,只要用户授权,应用外的文件也可以。有官方 api ,功能强大相比 localstorage 等可以存储无限多的内容,安全性也得到提升。新型浏览器均兼容,包括 Android2.2+,具体参考 Can i Use 。
URL 传参相对简便,便于开发者一目了然的调试,刷新页面也不会丢失。兼容性也很好。同时它安全性低,易被获取甚至篡改,长度受限,,能够跨页面但无法传输特殊数据类型,参数多时候辨识度低
RAM 保存在内存中,安全性高,不易被攻击者获取。 Redux,VUEX,Flux等 还提供了内存中数据更新 刷新组件的能力 我认为这是一项前端技术的里程碑。但是重载会丢失数据
Other中的Other 其他我很少用到的 例如Web SQL,IndexDB,因为没用到或者用的太少 这里就不介绍了
安全性
XSS 攻击全称跨站脚本攻击,它允许恶意web用户将代码植入到提供给其它用户使用的页面中。泄露cookie,localStorage,sessionStorage中保存的敏感信息。预防措施就是 不允许上传js文件,input输入框进行输入内容校验同时不要在cookie,localstorage,sessionStorage中存储敏感信息
SQL注入 通过把SQL命令插入到Web表单提交或输入域名或页面请求的查询字符串,最终达到欺骗服务器执行恶意的SQL命令,如破解登录,获取敏感信息等。我们应该永远不要信任用户的输入。对用户的输入进行校验,应用的异常信息应该给出尽可能少的提示,
FAQ
A:为什么没有seesion,它和sessionStorage有什么不同Q:session属于一种特殊的cookie,与服务器交互时由浏览器自动创建 有着httpOnly,不允许前端获取/修改等特点与sessionStorage有本质的不同
A:我看完没有明白到底哪一种存储手段是最好的Q:并没有哪一种方式是最好的。它们拥有自己的特性,本文也主要分析他们额特质,实际开发过程中经常搭配使用
A:什么是Can i UseQ:https://www.caniuse.com/ 检测浏览器是否兼容某一特性的在线地址