[TOC]
## 前言
web存儲對于優化體驗,保存用戶數據具有重要的作用。本教程所指的web存儲是指廣義的。而存儲本身是為了加快下一次的訪問速度以及避免一些數據請求。
## http緩存
### 新鮮度
新鮮度,有時候我們也稱為ttl(生存時間)。最簡單的方式就是使用報頭,緩存代理會被告知該資源保留多長時間。我們可以使用expire報頭,一般的靜態網站,我們都會建議比較長的時間。
這樣做的目的是所謂的靜態資源,比如css和js,如果可以的話,不用再次獲取。
### 驗證
驗證為緩存代理提供了一種無須請求完整資源就能確定舊的緩存是否可用的方法。瀏覽器可以發出一個包含if-modified-since的報頭請求,如果服務器上的資源沒有發生改變,就會返回304 not modified的響應,這樣瀏覽器就會使用緩存中已經存在的文件,而不是重新獲取。
另一個驗證功能是etag,是一種唯一的標識符,一般通過哈希算出,只需要簡短的字符,能在沒有日期信息的情況下驗證緩存是否與服務器文件相符合,請求代理會創建一個帶有附加條件的請求,并加入if-modified-since,它包含etag.如果服務器的內容包含etag與客戶端的匹配,那么會返回304。
驗證緩存需要在服務端與客戶端進行一個往返,雖然比下載文件好,但是可以的話,還是設置文檔有效期更好,避免請求,瀏覽器也不會去驗證
### 失效
某些操作執行后會導致緩存項失效,最常見的就是創建相同url的非get請求。
### 正常的緩存行為
如果沒有寫報頭,什么都沒做情況下,大多數瀏覽器有一個最大緩存大小,當緩存達到這個大小的時候,就會從緩存中刪除最近使用較少的項目。假設不考慮緩存報頭,瀏覽器可能緩存你完全不想保存的內容。
## 為移動優化
* 移動端ios瀏覽器在你關閉瀏覽器或者關掉進程的時候,緩存可能就被清掉,而安卓瀏覽器一共的緩存只有2.5m,所以這種情況下,設置頭信息更為重要。
## webStorage
### 特性
除了cookie之外,為我們提供了另一種持久化數據的存儲方式,與cookie不用,網絡存儲為每個域提供了5m的鍵值對的存儲空間,在ios上使用utf-16的,每個字符需要兩倍多的字節,所以ios實際存儲量為2.5m.
* 具體語法以及介紹參考:[h5websSroage教程](http://www.hmoore.net/eagles/codingrules/315244)
## 應用緩存
- 前端入門
- 前端入職須知
- 前端自我定位
- pc與手機頁面差別
- 前端書單
- 前端種子計劃
- 前端技術棧
- ps
- ps入門階段
- html
- html入門
- html代碼規范
- meta
- table
- iframe
- a標簽詳解
- image
- html代碼審查工具
- h5專題
- h5入門
- h5新增屬性
- canvas畫布教程
- audio/video
- Geolocation
- Websockets
- Web storage
- Communication
- Web Workers
- requestAnimationFrame
- css
- css入門必學
- css代碼規范
- 項目字體規范
- css基本位置布局
- css常見樣式命名規則
- css代碼優化建議
- css常用樣式名
- css選擇器攻略
- css盒子模型的理解
- css屬性繼承與默認值
- css代碼審查工具
- css中常見的知識盲區
- css3新特性淺談
- css新特性了解
- border-radius
- background
- transform
- animation
- white-space
- css常用技術
- 文本兩端對齊
- css之浮動解決方案
- css優化建議
- 文本超出省略
- img-sprites
- rem布局教程
- 水平居中&垂直居中
- 固寬&變寬布局
- 寬高固定比例的盒模型
- 樣式預處理語言
- less教程
- sass教程
- postcss教程
- js
- javascript入門
- js代碼規范
- js基礎拓展
- js代碼審查工具
- js性能優化
- js基本語句
- 基本運算
- 基本語句語法
- js對象
- es6入門
- obj
- Array
- Date
- String
- Boolean
- Number
- Json
- RegExp
- Math
- function
- jquery入門
- jq核心思想
- jq基本語法
- jq插件庫匯總
- js常用技術
- break&continue區別
- js對日期轉換
- js控制運動-move.js
- 原生js-cookie語法
- ajax請求后回調
- 表單數據序列化
- zepto
- zepto入門
- 百度touchjs
- js編程
- 插件庫
- 功能性插件
- pdfjs
- wdatepicker
- qrcoder
- barcode插件
- photoviewer
- hammer.js
- echarts
- 交互組件
- layerjs
- java
- java入門
- java基本語句
- springMVC
- javaweb
- vm模板引擎
- freemarker
- maven教程
- mySql教程
- flex教程
- flex入門
- git教程
- git入門
- git分支
- git-tag管理
- git注意事項
- git-torise入門
- ide-git插件使用
- web
- web兼容
- web兼容思想
- pc端兼容適配文檔
- pc端兼容bug匯總
- ie兼容bug匯總
- 手機兼容bug匯總
- web安全
- jeecms
- web存儲
- app/h5組件
- 安卓教程
- ios教程
- 前端教程
- rubikx的教程
- 其他
- artTemplate
- tmod使用
- 跨域問題
- markdown教程
- 常用工具
- postman-api調試
- web常識
- 瀏覽器ua統計
- ui框架
- easyui
- bootstrap
- 入門推薦
- weui
- sui-pc
- sui-mobile
- layerUi