localStorage、sessionStorage、cookie分别是什么以及区别+浏览器存储方法

一：localStorage、sessionStorage、cookie分别是什么以及区别？

cookie是客户端与服务器端进行会话使用的一个能够在浏览器本地化存储的技术
localStorage是永久存储在客户端浏览器上，除非手动去清除
sessionStorage也是存储在客户端浏览器上，但仅在当前会话有效，关闭页面或浏览器后被清除
localStorage、sessionStorage、cookie在同名时都是可以被覆盖的

localstorage就是web也就是html5上的一种本地存储技术。
在web上存储方式分别为localstorage和sessionstorage。


localstorage：
是永远存在的本地存储，除非用户自行去删除相关的数据，否则会永远存在。

特点：
1.它的数据永远保存在本地，不过随着http请求的发送而发送。
生命周期：永久，除非人为删除
2.相同域名下localstorage是共享的，可以读取，清除和覆盖。但仅局限于同一浏览器和同源文件。
即不同浏览器之间不能共享，相同浏览器且相同域名和端口下不同tab页可以共享数据。
3.大小：约为5M
4.以字符串形式保存，不保存敏感的信息


sessionstorage：
生命周期：
即关闭窗口或浏览器sessionstorage就失效
在这种情况下，它只允许同一个窗口访问，不允许跨tab访问。
所以它的作用范围比localstorage更小一些，它不仅需要同浏览器，同源，还需要在相同tab页下才能起作用。也就是不同的标签页和页面是不能共享sessionstorage的。

区别：
1.cookie数据始终携带在http请求中，而sessionStorage和Localstorage不会自动把数据发送给服务器，只在本地保存

2.存储大小不同，cookie数据不能超过4k，所有cookie只适合保存很小的数据。sessionStorage和Localstorage存储大小比cookie大很多，可以达到5M或更大。

3.数据存储的有效期不同，cookie的有效期在设置的cookie过期时间内（如果不给cookie设置过期时间，会在浏览器会话结束时过期），sessionStorage的有效期是仅保持在当前页面，浏览器会话结束时(关闭窗口或浏览器)失效，localStorage的有效期是在不进行手动删除的情况下是一直有效的

4.读写操作的便捷程度，cookie的相关操作操作起来较为繁琐，而 sessionStorage和Localstorage的api接口使用方便

5.cookie出现的时间较早，目前见到的浏览器都支持，而localStorage和sessionStorage出现的时间较晚，对于版本较低的浏览器不支持。

6.web Storage支持事件通知机制，可以将数据更新的通知发送给监听者。

二、浏览器储存有哪些？
1.cookie
cookie自身有一个过期属性，并且在每次的通信过程中会向服务端传送。

2.localStorage、sessionStorage
-localStorage：永久储存，除非手动删除就一直存在。
-sessionStorage：只存在一个页面周期内，页面关闭就清除了。

3.indexedDB
内嵌在浏览器端的非关系型数据库，数据以键值对的形式存储，兼容性良好 indexDB 直接操作的存储对象是 ObjectStore，这有点类似其他数据库中 table 概念。IndexedDB 不属于关系型数据库（不支持 SQL 查询语句），更接近 NoSQL 数据库。（IndexedDB 是一个事务型数据库系统,是一种底层 API,用于在客户端存储大量的结构化数据，这种方式提供于更大的存储空间,使用上indexDB不仅仅是简单的键值对的写入存储，它是一种数据库的操作方式）

4.websql
内嵌在浏览器的关系型数据库，前端可以像在使用 mysql、Oracle 一样的写 sql 语 句，并存储信息。兼容性良好。存储后可在浏览器 resource 中查看
(Web Sql数据库API在HTML5之前就已经存在了,并以独立规范的形式出现,它并不是HTML5标准)

5.window变量
生命周期有限，一般不使用，常用于全局变量的临时储存。

6.application cache（通常用于静态资源（静态页面）的缓存，h5新特性）
7.cache Storage（缓存API）
8.http/浏览器缓存
9.flash缓存（基本不用）

(cache:缓存，storage:存储)

三：http/浏览器缓存（这个缓存是后端要去设置，前端只要发送http请求就行。而浏览器储存是在客户端上操作）
浏览器缓存是浏览器在本地磁盘对用户最近请求过的文档进行存储，当访问者再次访问同一页面时，浏览器就可以直接从本地磁盘加载文档。
浏览器缓存主要分为强缓存（也称本地缓存）和协商缓存（也称弱缓存）。

强缓存：
当请求资源的时，如果是之前请求过的并使用强缓存，那么在过期时间内将不会发送本次请求向服务器获取资源，而是直接从浏览器缓存中获取（不管资源是否改动）。过期了将重新从服务器获取，并再次强缓存。
协商缓存：
当请求资源时，如果是之前请求过的并使用协商缓存，还是发送请求到服务器，服务器通过逻辑判断（两种方式判断，一种是内容最后的修改时间，一种是每一个资源是唯一的，对应唯一的检验码）确认资源没有修改返回304状态码，那么本次的资源则是从缓存中获取；如果经过判断确认资源被修改过，则重新发送资源到客户端，并且客户端更新缓存。

注：从强缓存和协商缓存的比较来看再结合逻辑，协商缓存应用更合理

使用缓存有下面的优点：
减少冗余的数据传输
减少服务器负担
加快客户端加载网页的速度

浏览器缓存具体参考这篇文章