一、前端游览器的几种存储方式
1.cookies
2.localstorage
3.sessionstorage
4.Web SQL
5.IndexedDB
二、储存方式介绍
1.cookies:
在HTML5标准前本地存储的主要方式
优点:
①兼容性好;
②请求头自带cookie方便;
缺点:
①大小是只有4K;
②自动请求头加入cookie浪费流量;
③每个domain限制20个cookie;
④使用起来麻烦需要自行封装;
2.localStorage:
HTML5加入的以键值对(Key-Value)为标准的方式
优点:
①操作方便;
②永久性存储(除非手动删除);
③大小为5M;
④兼容IE8+;
⑤localStorage会可以将第一次请求的数据直接存储到本地(这个相当于一个5M大小的针对于前端页面的数据库);
缺点:
①浏览器的大小不统一,并且在IE8以上的IE版本才支持localStorage这个属性;
②目前浏览器中都会把localStorage的值类型限定为string类型;
③localStorage在浏览器的隐私模式下面是不可读取的;
④ocalStorage本质上是对字符串的读取,如果存储内容多的话会消耗内存空间,会导致页面变卡;
⑤localStorage不能被爬虫抓取到;
注意:
①localStorage的使用也是遵循同源策略的,所以不同的网站直接是不能共用相同的localStorage;
②对localStorage的读取,其中官方推荐的是getItem\setItem这两种方法对其进行存取;
③ 一般我们会将JSON存入localStorage中,但是在localStorage会自动将localStorage转换成为字符串形式。所以,可以使用JSON.stringify()这个方法,来将JSON转换成为JSON字符串;读取之后要将JSON字符串转换成为JSON对象,使用JSON.parse()方法。
3.sessionStorage:
与localStorage基本类似,区别是sessionStorage当页面关闭后会被清理,而且与cookie、localStorage不同,他不能在所有同源窗口中共享,是会话级别的存储方式。
4.Web SQL:
2010年被W3C废弃的本地数据库存储方案,但是主流浏览器(火狐除外)都以经有了相关的实现,web sql类似于SQLite,是真正意义上的关系型数据库,用sql进行操作,当我们用JavaScript时要进行转换,较为繁琐。
5.indexdDB:
是被正式纳入HTML5标准数据存储方案,他是NoSQL数据库,进行键值对进行存储,可以进行快速读取操作,非常适合web场景,同时用JavaScript进行操作会非常方便。