知识总结之几种数据存储的区别及用法

Posted 2020-10-06

    在H5到来之前，数据存储的方式大多使用cookie，但由于其体积太小以及请求时地址栏显示数据等缺点，便有了H5中的localStorage，可以存储较大数据，且不会自动发送到后台。这里主要介绍总结集中web前端数据存储的几种方法及区别。

  1.cookie

　　存储数据较小，大小4K之内；

　　请求时地址栏带数据，存储在客户端（电脑浏览器中）；

　　不易存储内容过多，会严重占用服务器端带宽，影响性能；

　　对于IE浏览器有UserData，大小是64k,只有IE浏览器支持。

  2.本地存储localStorage

　　以键值对的方式存储，永久存储，除非手动删除；

　　大小：5M，拓展了cookie的4K限制，相比于cookie可节约带宽，但只在高版本浏览器中支持；（注：IE9 localStorage不支持本地文件，需要将项目部署到服务器，才可支持）。

  3.本地存储sessionstorage

　　与localStorage 在使用方法上相同，区别在于 sessionStorage 在浏览器关闭后即被清空，而 localStorage 则会一直保存。

  4.Web SQL

　　关系数据库，通过SQL语句访问；

　　Web SQL 数据库可以在最新版的 Safari, Chrome 和 Opera 浏览器中工作。

  5.IndexedDB

　　索引数据库 (IndexedDB) API 对创建具有丰富本地存储数据的数据密集型的离线 html5 Web 应用程序很有用。同时它还有助于本地缓存数据，使传统在线 Web 应用程序（比如移动 Web 应用程序）能够更快地运行和响应。

  6.离线缓存（application cache）

　　优点： 离线浏览；

　　　　　　提升页面载入速度；

 

　　　　　　降低服务器压力；

　　离线缓存与传统浏览器缓存区别：

　　　　　　1. 离线缓存是针对整个应用，浏览器缓存是单个文件

　　　　　　2. 离线缓存断网了还是可以打开页面，浏览器缓存不行

　　　　　　3. 离线缓存可以主动通知浏览器更新资源

 

（不完全总结，欢迎各界大佬补充，随时完善）