CookieOUT！三大新法助你妙解存储难题

说起上网，以前我们就是利用Cookie来存点东西。但这个小东西其实挺烦人，有俩缺点：第一，它不能把数据带去其他页面；第二，存多了就卡得要命。现在的浏览器可聪明了，开发出了三个新方法来解决这些问题——本地存储、Session Storage 和离线缓存。好好听我给你说说它们到底有啥用处和特点！

1.本地存储localstorage

HTML5中有个大杀器叫做LocalStorage喔~关闭浏览器甚至重新启动电脑都不会丢掉数据，它们就乖乖地待在你电脑里！不过要注意IE9可能用不了这功能，所以得把数据传到服务器上才能永久保存喔。

别忘了，LocalStorage可啥都行！不论是哪种类型的数据，它都会照单全收并帮你保管好。因此，咱们在编程时就可以想怎么用就怎么用！

if(window.localStorage){
 alert('This browser supports localStorage');
}else{
 alert('This browser does NOT support localStorage');
}

2.本地存储sessionstorage

哈喽各位，你们可能不大清楚咱们网页上有两个好朋友，就是 sessionStorage 跟 localStorage。不过它们俩还有点小不同，简单来说，sessionStorage 的数据只能存到你关掉浏览器窗口为止，否则都不存在了；但是 localStorage 就厉害了，它会一直帮你看管数据的，除非你亲自去删除。所以说，如果你只是想临时放个东西，用完了就丢的话，那 sessionStorage 就挺适合你的！

要说哪个好，你我随便挑一个就好了，sessionStorage和localStorage其实没啥区别的。

3.离线缓存（application cache）

...

说到 local storage 和 session storage，还有个神器你得试试看——离线存储！它就像备胎一样，网速慢或者断了也没事儿，app 的东西都提前下载好了能用。

好好学学怎么弄离线缓存！首先，要明白什么是Manifest文件。这个东西就像个小备忘录，分成CACHE MANIFEST、NETWORK和FALLBACK三块，告诉我们需要缓存啥，上网找啥以及万一没网了咋整等等。

在使用离线缓存时需要注意以下几点：

CACHE MANIFEST
# 2016-07-24 v1.0.0
/theme.css
/main.js
 
NETWORK:
login.jsp
 
FALLBACK:
/html/ /offline.html

你知道吗？其实浏览器存储也有规矩的！比如有的浏览器就规定每站只能放5MB的内容。

要是更新时 manifest 或 list 里的某些文件下不下来，那我们这回就白忙活了。

     manifest
     text/cache-manifest

用 manifest 文件的时候，要确保 HTML 和 manifest 是从同一个地方来的！

浏览器会自动记录你用过的 manifest 文件和 HTML 文件。你换了 HTML 代码的话，千万记得改一下版本号，马上就能看到效果。

可别小瞧这个 manifests 文件了。记好了，CACHE、NETWORK 和 FALLBACK 的声明放在哪里都行！

回收资源文件之前，千万记得要把它们跟manifest文件放在一起喔！

7.更新版本后需要刷新页面才能启用新版本。

Manifest属性并非所有页面都会用到，没关系的，没有它咱的浏览器也会自动保存一些缓存文件。所以咱们就直接把它们利用起来~

只要manifest文件改了，资源请求也要同步变化。

善用咱家的本地存储方法，这网站就随你折腾咯～如此一来，大家都能享受更赞的浏览体验！