HTML5--Web存储

写在前面：很多内容都是对w3cschool教程的复述，深入学习建议w3cschool - 编程狮，随时随地学编程

---

在html5之前主要使用cookie存储，这种存储方式的存储大小只有4k 。

html5新增web存储，数据将不会保存在服务器上，只用于用固话请求网站数据上，且可存储容量较之前明显变大。

web存储以键值对的方式存在，主要有两个对象：localStorage和sessionStorage。

在存储之前，可以通过以下方式检查浏览器是否支持web存储：

if(typeof(Storage)!=="undefined")
        
  {
        
  // 支持 localStorage/sessionStorage
        
  // 代码
        
  }
        
else
        
  {
        
  // 不支持 web 存储。 
        
  }

一、localStorage对象

存储的数据没有时间限制。

数据以键/值对(通常以字符串存储)的形式存储，因此需要创建一个。

localStorage.keyname="valuee";
document.getElementById("show").innerHTML="value：" + localStorage.keyname;

移除localStorage对象中的某个数据：

localStorage.removeItem("keyname");

 其实两种存储对象的API是一样的，因此在这里统一标出：

• 保存数据：localStorage.setItem(key,value);
• 读取数据：localStorage.getItem(key);
• 删除单个数据：localStorage.removeItem(key);
• 删除所有数据：localStorage.clear();
• 得到某个索引的key：localStorage.key(index);

二、sessionStorage对象

sessionStorage的存储时间仅限于浏览器窗口存在时间，当关闭浏览器窗口后数据就会删除。

使用方法和localStorage雷同。

三、前端缓存的特点和比较

(以下内容都是到处粘贴到md文档里原作者们实在找不到了在这里致歉仅供个人存档)

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

1 http缓存

当客户端向服务器请求资源时，会先抵达浏览器缓存，如果浏览器有”要请求资源“的副本，就可以直接从浏览器缓存中提取而不是从原始服务器中提取这个资源。  

常见的http缓存只能缓存get请求响应的资源，http缓存都是从第二次请求开始的。

1.1 强缓存

强制缓存在缓存数据未失效的情况下（即Cache-Control的max-age没有过期或者Expires的缓存时间没有过期），那么就会直接使用浏览器的缓存数据，不会再向服务器发送任何请求。  

生效时http状态码为200，加载速度最快，性能最好，与之相关的头属性有Pragma/Cache-Control/Expires。

 

chrome浏览器中返回的200状态码情况有两种：

from memory cache(从内存中获取/一般缓存更新频率较高的js、图片、字体等资源)

from disk cache(从磁盘中获取/一般缓存更新频率较低的js、css等资源)

1.2 协商缓存

当第一次请求时服务器返回的响应头中没有Cache-Control和Expires或者Cache-Control和Expires过期还或者它的属性设置为no-cache时(即不走强缓存)，那么浏览器第二次请求时就会与服务器进行协商，与服务器端对比判断资源是否进行了修改更新。如果服务器端的资源没有修改，那么就会返回304状态码，告诉浏览器可以使用缓存中的数据，这样就减少了服务器的数据传输压力。  

如果数据有更新就会返回200状态码，服务器就会返回更新后的资源并且将缓存信息一起返回。

 

 一些注意点：

• 强缓存情况下，只要缓存还没过期，就会直接从缓存中取数据，就算服务器端有数据变化，也不会从服务器端获取了，这样就无法获取到修改后的数据。解决的办法有：在修改后的资源加上随机数,确保不会从缓存中取。  
• 尽量减少304的请求，因为我们知道，协商缓存每次都会与后台服务器进行交互，所以性能上不是很好。从性能上来看尽量多使用强缓存  
• 在Firefox浏览器下，使用Cache-Control: no-cache 是不生效的，其识别的是no-store。这样能达到其他浏览器使用Cache-Control: no-cache的效果。所以为了兼容Firefox浏览器，经常会写成Cache-Control: no-cache，no-store。  
• 与缓存相关的几个header属性有：Vary、Date/Age。

 2 浏览器缓存

本地存储小容量：cookie、localStorage、sessionStorage。

本地存储大容量：websql(已废弃)、indexdb。

2.1 cookie

主要用于用户信息存储，其内容可以自动在请求时被传递给服务器。

分为两类：

• session cookie --- 在浏览器关闭后就会失效，保存在内存里  
• third-party cookie --- 只有到了exprie时间后才会失效，保存到本地

含有属性：

• name字段 --- 一个cookie的名称  
• value字段 --- 一个cookie的值  
• domain字段 --- 可以访问此cookie的域名  
• path字段 --- 访问此cookie的页面路径  
• expires/max-age --- cookie超时时间  
• size --- 此cookie大小  
• http --- cookie的httponly属性，为true时只有http的请求头会有此cookie的信息，而不能用document.cookie来获取cookie  
• secure --- 设置是否只能通过https来传递此条cookie

2.2 webStorage

其实就是localStorage和sessionStorage，可用于临时或永久保存客户端的少量数据。一般存储容量都是5M，不同浏览器可能存在差异。

2.3 webSQLDatabase

同样是HTML5新增，是客户端本地化的一套数据库系统，可以将大量的数据保存在客户端，无须与服务器端进行交互，极大地减轻了服务器端的压力。