前端缓存

前端缓存

概念

前端缓存主要是分为HTTP缓存和浏览器缓存。其中HTTP缓存是在HTTP请求传输时用到的缓存，主要在服务器代码上设置；而浏览器缓存则主要由前端开发在前端js上进行设置。

对于一个数据请求来说，可以分为发起网络请求、后端处理、浏览器响应三个步骤，浏览器缓存可以优化第一步和第三步，当浏览器缓存中有数据时，不必要每次向服务器发送请求，而是直接从浏览器缓存中获取数据。

浏览器每次发起请求，都会先在浏览器缓存中查找该请求的结果以及缓存标识
浏览器每次拿到返回的请求结果都会将该结果和缓存标识存入浏览器缓存中

三种本地缓存方式

cookie

保存在本地浏览器中，只能在当前浏览器中使用，不能跨域使用。

特点：

• cookie内存大小受限（个域名下存放的cookie的个数是有限制的，不同的浏览器存放的个数不一样,一般为20个。
  每个cookie存放的内容大小也是有限制的，不同的浏览器存放大小不一样，一般为4KB。）
• cookie具有生命周期
  会话cookie：用户退出浏览器，会话Cookie就会被删除；
  持久cookie：会存储在硬盘里，保留时间更长，关闭电脑和浏览器也依旧存在，可以设置一个特定的过期时间（Expires）或者有效日期（Max-Age）
• cookie满足同源策略（不能跨域但可以跨越一个域名下多个网页）

设置
单个设置：

document.cookie="userId=212";

多个设置：

document.cookie="userId=222,name='abc'"

在cookie中，名或值中不能有分号（;）、逗号(,）、等号（=）以及空格，有特殊字符时，需要先编码再解码

读取
cookie的值可以直接由document.cookie获得

var strCookie=document.cookie;//这将获得以分号分隔开的多个名/值所对应的字符串。

修改
要想修改一个cookie，只需要重新赋值即可，旧的值会被新的值覆盖。在设置新cookie时，path/domain这几个选项要和旧cookie保持一样，否则不会修改旧值，而是添加一个新的cookie。
如果只设置一个值，那么算cookie中的value; 设置的两个cookie,key值如果设置的相同，下面的也会把上面的覆盖。

localStorage

HTML5新方法，IE8以上支持

特点

• 生命周期：持久化的本地存储，除非主动删除数据，否则数据是永远不会过期的；
• 存储的信息在同一域中是共享的；
• 当本页操作（新增、修改、删除）了localStorage的时候，本页面不会触发storage事件,但是别的页面会触发storage事件；
• 大小：5M；
• 在非IE下的浏览中可以本地打开。IE浏览器要在服务器中打开；
• localStorage本质上是对字符串的读取，如果存储内容多的话会消耗内存空间，会导致页面变卡；
• localStorage受同源策略的限制；
• 不能被爬虫抓取；
• 只能存储字符串类型，需要转成字符串存储。

使用

• 存值方式

localStorage.a=1;
localStorage["b"]=1;
localStorage.setItem("name","abc")

• 取值方式

localStorage.a;
localStorage["b"];
localStorage.getItem("name")

• 修改

// 自身方法
localStorage.setItem("name","TOM");
// []方法
localStorage["name"]="TOM";
// .方法
localStorage.name="TOM";

• 删除

// 自身方法
localStorage.removeItem("name");
// []方法
delete localStorage["name"];
// .方法
delete localStorage.name

• 获取本地存储key个数

// 通过自身的key
for (var i=0;i<localStorage.length;i++) {
    console.log(localStorage.key(i));
}

// 通过for in 循环获取
for(var key in localStorage){
    console.log(key);
}

• 获取所有的值

localStorage.valueOf();取出所有的值

• 清除所有的值

localStorage.clear()

• 判断是否具有某个key，hasOwnProperty方法

localStorage.hasOwnProperty("name")
// 如果存在的话返回true，不存在返回false

使用技巧

1. 先判断浏览器是否支持localStorage，通过if(!window.localStorage) return;
2. 单词太长，不方便书写，可以利用 var storage=window.localStorage;
3. 字符串和原始类型需要通过JSON.stringfy转字符串，通过JSON.parse转成对象；
4. 通过封装方法实现来回转化。

sessionStorage

和localStorage差不多，本地会话存储，关闭窗口后，数据被销毁。

cookie、localStorage、sessionStorage区别

• 相同：在本地（浏览器端）存储数据
• 不同：
  localStorage、sessionStorage

localStorage只要在相同的协议、相同的主机名、相同的端口下，就能读取/修改到同一份localStorage数据。

sessionStorage比localStorage更严苛一点，除了协议、主机名、端口外，还要求在同一窗口（也就是浏览器的标签页）下。

localStorage是永久存储，除非手动删除。

sessionStorage当会话结束（当前页面关闭的时候，自动销毁）

cookie的数据会在每一次发送http请求的时候，同时发送给服务器而localStorage、sessionStorage不会。