浏览器端的几种存储技术简介

绝地灬酷狼 2021-12-01 12:38 568阅读 0赞

### 文章目录 ###

*  1、Cookie
 *   *   *  前端理解Cookie
 *  2、sessionStorage和localStorage
 *   *   *  使用sessionStorage和localStorage
 *  3、离线缓存 application cache
 *  4、浏览器的本地数据库

HTTP协议是无状态协议，是指协议对于交互没有记忆能力，浏览器与服务器的每一次交互都是新的。为了使WEB应用程序无法在页面之间共享数据和记录用户状态，Web应用允许浏览器提供的API将数据存储到用户的电脑上。  
客户端存储使Web浏览器有了记忆功能，比如常用的用户登录状态，购物车等都可以存储在客户端。

*  客户端存储遵循“同源策略”  
    同一站点的不同页面之间是可以互相共享存储数据；不同站点的页面无法互相读取对方存储数据。
 *  Web应用可以选择它们存储数据的有效期  
    采用临时存储可以让数据保存至当前窗口关闭或者浏览器退出；采用永久存储，可以将数据永久地存储到硬盘上，永不失效。

# 1、Cookie #

cookie是一小段存储在浏览器端的文本信息，cookie会自动在web浏览器和web服务器之间传输，发送HTTP请求时，会把保存在该请求域名下的所有cookie值发送给web服务器，因此服务器端脚本是可以读、写存储在客户端的cookie的操作。  
所有的主流浏览器如IE、Netscape、Firefox、Opera等都支持Cookie。 cookie的数目和大小有限制，每个web服务器(域名)保存的cookie数不能超过50个，每个cookie保存的数据不能超过4KB，如果超过了4KB（IE6大约只能存储2K），服务器会处理不了。

### [前端理解Cookie][Cookie] ###

# 2、sessionStorage和localStorage #

在HTML5中，新加入了localStorage和sessionStorage存储机制，用来实现本地存储，解决了cookie存储空间不足的问题，sessionStorage和localStorage一般浏览器支持的是5M大小。  
sessionStorage和localStorage区别：  
localStorage属于永久性存储，sessionStorage在会话结束的时候，sessionStorage中的数据会被清空。

### [使用sessionStorage和localStorage][sessionStorage_localStorage] ###

# 3、离线缓存 application cache #

web缓存就是根据请求保存响应内容，当发起下一个相同资源的请求时，直接使用上次保存的内容来响应请求。浏览器本身就有缓存机制，但是，这些缓存机制不够可靠，可能并不会按你所想要的方式运行。HTML5则通过Application Cache(或 AppCache)让一个开发者可以指定浏览器需要保存哪个文件。当用户在离线情况下时，即使他们按了刷新按钮，你的应用也能正确加载和工作。

# 4、浏览器的本地数据库 #

sessionStorage和localStorage只能存储简单数据结构的数据，对于复杂的Web应用的数据却无能为力。Html5提供了一个浏览器端的数据库支持，允许我们直接通JS的API在浏览器端创建一个本地的数据库，而且支持标准的SQL的CRUD操作，让离线的Web应用更加方便的存储结构化的数据。  
实现HTML5 离线数据存储的Web SQL，开始是一个基于SQLite 的离线数据库，不过W3C 的 WebDatabase 规范中说这份规范不再维护了，取而代之的是IndexDB，一个NoSQL类型的数据库。

[Cookie]: https://blog.csdn.net/dreamingbaobei3/article/details/103701841
[sessionStorage_localStorage]: https://blog.csdn.net/dreamingbaobei3/article/details/103716193