本地缓存

为什么需要用到本地缓存

在页面开发中有所有的信息都会在页面刷新下就会重置。如果需要用到一些记录下来的信息的话，就得跟服务器后端进行交互。但这些信息又不一定全部都涉及安全的，并且频繁的与后端进行交互也大大的提高了服务器的压力。所以有些信息是可以通过本地缓存的方法把数据临时的保存到浏览器中。

本地缓存的方法

Cookie

cookie可用于在程序员间传递少量的数据，对于Web应用来说，它是一个在服务器和客户端之间来回传送文本值的内置机制，服务器可以根据cookie来追踪用户在不同页面的访问信息。正因为它卓越的表现，在目前的Web应用中，cookie得到了最为广泛的应用。

跟cookie对应是session。seeion是一种会话数据保存机制。跟cookie最大不同的地方是seeion存放在服务器中。session跟cookie有着非常多的联系。重要一点是，如果浏览器禁用了cookie那session也是不能的。

尽管如此，cookie仍然有很多不尽如人意的地方，主要表现在以下方面。

1. 大小的限制
   cookie的大小被限制在4KB。在Web的富应用环境中，不能接受文件或邮件那样的大数据。
2. 带宽的限制
   只要有涉及cookie的请求，cookie数据都会在服务器和浏览器间来回传送。这样无论访问哪个页面，cookie数据都会消耗网络的带宽。
3. 安全风险
   由于cookie会频繁地在网络中传送，而且数据在网络中是可见的，因此在不加密的情况下，是有安全风险的。
4. 操作复杂
   在客户端的浏览器中，使用JavaScript操作cookie数据是比较复杂的。但是服务器可以很方便地操作cookie数据

尽管如此但由于Cookie是现在为止所有浏览器（包括旧的浏览器）都直接支持的方法。所以我们还是需要知道它的使用。

Cookie的使用方法

JavaScript 可以用 document.cookie 属性创建、读取、删除 cookie。

• 创建cookie

document.cookie = "username=Alex";

cookie本身是以字符串以名称值对中的方式进行保存的。

document.cookie = "username=Alex; expires=Sun, 31 Dec 2017 12:00:00 UTC";

cookie的有效时长是可以设置的，默认情况下浏览器关闭就会失效。所以我们可以添加有效日期

通过 path 参数，您可以告诉浏览器 cookie 属于什么路径。默认情况下，cookie 属于当前页。

document.cookie = "username=Bill Gates; expires=Sun, 31 Dec 2017 12:00:00 UTC; path=/";

• 删除cookie
  删除 cookie 非常简单。

  删除 cookie 时不必指定 cookie 值：

  直接把 expires 参数设置为过去的日期即可：

document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;";

您应该定义 cookie 路径以确保删除正确的 cookie。
如果你不指定路径，一些浏览器不会让你删除 cookie。

** Cookie到现在为止也还有很多页面功能需要使用到它。并且Cookie也是唯一可以让服务器直接操作的本地缓存。**

HTML5新的特性——Web Storage

HTML5为了更好的解决本地缓存的问题，所以加入了新的特性Web Storage。这个本地缓存又分在两种 1、localStorage; 2、sessionStorage

使用Web Storage的存储优势

Web Storage可以在客户端保存大量的数据，而且通过其提供的接口，访问数据也非常的方便。然而，Web Storage的诞生并不是为了替代cookie，相反，是为了弥补cookie在本地存储中表现的不足。
Web Storage本地存储的优势主要表现在以下几个方面。

1. 存储容量
   提供更大的存储容量。在Firefox、Chrome、Safari和Opera中，每个网域为5MB；在IE8及以上为10MB。

2. 零带宽
   Web Storage 因为是本地存储，不与服务器发生交互行为，所以不存在带宽的占用。

3. 编程接口
   Web Storage提供了一套丰富的编程接口，使得数据操作更加方便

4. 独立的存储空间
   每个域都有独立的存储空间，各个存储空间是完全独立的，因此不会造成数据的混乱。

由此可见，Web Storage并不能完全替代cookie，cookie能做的事情，Web Storage不一定能做到，如服务器可以访问cookie数据，但是不能访问Web Storage数据。所以Web Storage和cookie是相互补充的，会在各自不同领域发挥作用。
随着移动互联网的发展，浏览器端的富应用必然是一种趋势。.

会话存储（sessionStorage）和本地存储（localStorage）的区别

Web Storage包括会话存储（sessionStorage）和本地存储（localStorage）。熟悉Web变成的人员第一次接触Web Storage时，会自然的与session和cookie去对应。不同的是，cookie和session完全是服务器端可以操作的数据，但是sessionStorage和localStorage则完全是浏览器客户端操作的数据。
sessionStorage和localStorage完全继承同一个Storage API，所以sessionStorage和localStorage的编程接口是一样的。sessionStorage和localStorage的主要区别在于数据存在的时间范围和页面范围。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-7bwFk43Q-1605252382390)(./20180804191256403.png)]

检查浏览器是否支持Web Storage

function CheckStorageSupport(){     
       if(window.sessionStorage){          
              console.log("浏览器支持sessionStorage特性！");    
      }else{          
              console.log("浏览器不支持sessionStorage特性！");    
      }    
      if(window.localStorage){        
              console.log("浏览器支持localStorage特性！");         
     }else{  
              console.log("浏览器不支持localStorage特性！");  
     }
 }
 window.addEventListener("load",CheckStorageSupport,false);

使用Web Storage

由于localStorage与sessionStorage两个都是使用的Storage API所以它们的基本使用是相同的

1. 保存数据到sessionStorage

window.sessionStorage.setItem("key","value");

Key为键，value为值，setItem()表示保存数据的方法。

2. 从sessionStorage中获取数据
   如果知道保存到sessionStorage中的key，就可以得到对应的值。sessionStorage获取数据的基本语法如下：

value = window.sessionStorage.getItem("key");

3. 设置和获取数据的其他写法
   对于访问Storage对象还有更简单的方法，根据“键”和“值”的配对关系，直接在sessionStorage对象上设置和获取数据，可完全避免调用setItem()和getItem()方法。
   保存数据的方法也可写为如下的形式。

window.sessionStorage.key = "value";

或

window.sessionStorage["key"]="value";

获取数据的方法更加直接，可写为如下形式：

value = window.sessionStorage.key;

或

value = window.sessionStorage["key"];

Storage API的属性和方法

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-G4iybH0b-1605252382419)(2018080418573471.png)]