浏览器的存储技术

一般浏览器有三个存储技术分别是

Cookie 、 localstorage、SessionStorage

什么是Cookie

cookie是浏览器提供的一种机制，它将document对象的cookie属性提供给JavaScript。可以由JavaScript对其进行控制，而并不是JavaScript本身的性质。cookie是存于用户硬盘的一个文件，这个文件通常对应于一个域名，当浏览器再次访问这个域名时，便使这个cookie可用。因此，cookie可以跨越一个域名下的多个网页，但不能跨越多个域名使用。

cookie是比较老的前端缓存技术了。

想要使用它前端必须要有服务（静态网页是不行的），而且存储大小限制在4kb。那么为什么必须要有服务才能使用cookie呢？因为只要有请求涉及，cookie就要在服务器和浏览器之间来回传送。而且由于浏览器的跨域限制，客户端和服务端必须要保证同源的原则才能使用，但是由于cookie是存放在前端的，所以安全问题一直是个大问题。

因此一般重要的信息不建议放在cookie中存放。

什么是localstorage？

 在HTML5中，新加入了一个localStorage特性，这个特性主要是用来作为本地存储来使用的，解决了cookie存储空间不足的问题(cookie中每条cookie的存储空间为4k)，localStorage中一般浏览器支持的是5M大小，这个在不同的浏览器中localStorage会有所不同。

优势

1. localStorage拓展了cookie的4K限制

2. localStorage会可以将第一次请求的数据直接存储到本地，这个相当于一个5M大小的针对于前端页面的数据库，相比于cookie可以节约带宽，但是这个却是只有在高版本的浏览器中才支持的

局限

1. 浏览器的大小不统一，并且在IE8以上的IE版本才支持localStorage这个属性

2. 目前所有的浏览器中都会把localStorage的值类型限定为string类型，这个在对我们日常比较常见的JSON对象类型需要一些转换

3. localStorage在浏览器的隐私模式下面是不可读取的

4. localStorage本质上是对字符串的读取，如果存储内容多的话会消耗内存空间，会导致页面变卡

5. localStorage不能被爬虫抓取到

 localStorage与SessionStorage的唯一一点区别就是localStorage属于永久性存储，而SessionStorage属于当会话结束的时候，SessionStorage中的键值对会被清空

什么是SessionStorage？

 SessionStorage用于本地存储一个会话（Session）中的数据，它的作用域是窗口级别的，也就是说不同窗口间的sessionStorage数据不能共享的。这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁。因此SessionStorage不是一种持久化的本地存储，仅仅是会话级别的存储。

SessionStorage的特点

 这个和localStorage有什么区别呢？作为一种会话级别的本地存储，一旦关闭浏览器SessionStorage就会消失，而localStorage是很“持久”的，即使你关闭一万次浏览器也没事，所以差距还是很大的。因为现在都是前后端分离的开发模式，前端工程师都很青睐这两种前端缓存方式。