1. 離線檢測(cè)
離線Web應(yīng)用，是在設(shè)備不能上網(wǎng)的情況下仍然可以運(yùn)行的應(yīng)用。為了檢測(cè)應(yīng)用是否離線，在頁面加載后，通過navigator.onLine取得初始的狀態(tài)，通過online和offline分別觸發(fā)這兩個(gè)事件。
2. 應(yīng)用緩存
HTML5的應(yīng)用緩存，簡(jiǎn)稱為appcache，是專門為開發(fā)離線Web應(yīng)用而設(shè)計(jì)的。Appcache是從瀏覽器的緩存中分出的一塊緩存區(qū)域，使用一個(gè)描述文件manifest file在這個(gè)緩存中保存數(shù)據(jù)，列出要下載和緩存的資源。
//描述文件示例
CACHE MANIFEST
# Comment
file.js
file.css
告訴頁面/offline.manifest中包含著描述文件，這個(gè)文件的MIME類型必須是text/cache-manifest
//將描述文件與頁面關(guān)聯(lián)起來
<html manifest = '/offline.manifest>
3. Cookie
Cookie是在客戶端存儲(chǔ)數(shù)據(jù)的一種選項(xiàng)，要求服務(wù)器對(duì)任意HTTP請(qǐng)求發(fā)送Set-Cookie HTTP頭作為響應(yīng)的一部分，其中包含會(huì)話信息。瀏覽器會(huì)存儲(chǔ)這樣的會(huì)話信息，通過為每個(gè)請(qǐng)求添加Cookie HTTP頭信息將信息發(fā)送回服務(wù)器。服務(wù)器將cookie發(fā)送到用戶瀏覽器并保存在本地，在瀏覽器下次向同一服務(wù)器發(fā)送請(qǐng)求時(shí)被攜帶并發(fā)送到服務(wù)器上，用于告知服務(wù)端兩個(gè)請(qǐng)求是否來自同一個(gè)瀏覽器，比如保持用戶的登錄狀態(tài)，cookie使給予無狀態(tài)的HTTP協(xié)議記錄穩(wěn)定的狀態(tài)信息成為可能。主要用于以下三個(gè)方面：
- 會(huì)話狀態(tài)管理（用戶登錄狀態(tài)、購物車、游戲分?jǐn)?shù)或其他需要記錄的信息）
- 個(gè)性化設(shè)置（如用戶自定義設(shè)置、主題等）
- 瀏覽器行為跟蹤（如跟蹤分析用戶行為等）
服務(wù)器使用Set-Cookie響應(yīng)頭部向?yàn)g覽器發(fā)送cookie信息
Set-Cookie: <cookie名>=<cookie值>
cookie包括會(huì)話期cookie和持久性cookie，會(huì)話期cookie瀏覽器關(guān)閉后被自動(dòng)清除，持久性cookie可以指定一個(gè)過期時(shí)間Expires和有效期Max-Age。被標(biāo)記為Secure的cookie只能通過被HTTPS加密過的請(qǐng)求發(fā)送給服務(wù)端。如果包含服務(wù)端Session信息的cookie不想被客戶端JavaScript腳本調(diào)用，應(yīng)該為其設(shè)置HttpOnly標(biāo)記。Domain和path標(biāo)識(shí)定義了cookie的作用域。document.cookie屬性用于讀寫當(dāng)前網(wǎng)頁的cookie。不同瀏覽器對(duì)cookie數(shù)量和大小的限制是不一樣的。單個(gè)域名設(shè)置的cookie不應(yīng)超過30個(gè)，每個(gè)cookie的大小不能超過4kB。瀏覽器的同源策略規(guī)定，兩個(gè)網(wǎng)址只要域名和端口相同，不要求協(xié)議相同，就能夠共享cookie。
如果服務(wù)器想改變一個(gè)早先設(shè)置的cookie，必須同時(shí)滿足cookie的key、domain、path、secure，只要有一個(gè)屬性不同，就會(huì)生成一個(gè)全新的cookie，而不是替換掉原來那個(gè)。由于服務(wù)器指定cookie后，瀏覽器的每次請(qǐng)求都會(huì)攜帶cookie，帶來額外的性能開銷，尤其是在移動(dòng)環(huán)境下。新的瀏覽器API允許開發(fā)者直接將數(shù)據(jù)存儲(chǔ)到本地，如使用Web Storage 和 IndexedDB。
很多Web站點(diǎn)都會(huì)與第三方廠商達(dá)成協(xié)議，由其來管理廣告。這些廣告被做得像Web站點(diǎn)的一個(gè)組成部分，并且發(fā)送持久cookie，用戶訪問另一個(gè)由同一廣告公司提供服務(wù)的站點(diǎn)時(shí)，由于域是匹配的，瀏覽器就會(huì)回送早先設(shè)置的持久cookie。營(yíng)銷公司可以將此技術(shù)與
Referer首部結(jié)合，構(gòu)建一個(gè)用戶檔案和瀏覽習(xí)慣的詳盡數(shù)據(jù)集?，F(xiàn)代瀏覽器都允許用戶對(duì)隱私特性進(jìn)行設(shè)置，以限制第三方cookie的使用。
4. Web Storage
WebStorage用于在瀏覽器存儲(chǔ)少量的數(shù)據(jù)，克服cookie帶來的限制，當(dāng)數(shù)據(jù)需要被嚴(yán)格控制在客戶端上，無須持續(xù)將數(shù)據(jù)發(fā)回服務(wù)器上時(shí)使用。提供一種在cookie之外存儲(chǔ)數(shù)據(jù)會(huì)話的途徑，提供一種存儲(chǔ)大量可以跨會(huì)話存在的數(shù)據(jù)的機(jī)制。
- sessionStorage 數(shù)據(jù)只保存到瀏覽器關(guān)閉
//使用方法存儲(chǔ)數(shù)據(jù)
sessionStorage.setItem('name', ‘siyuan')
//使用屬性存儲(chǔ)限制
sessionStorage.book = 'JavaScript'
- globalStorage跨會(huì)話存儲(chǔ)數(shù)據(jù)，有特定的訪問限制。
globalStorage['wrox.com'].name = 'siyuan'
- localStorage作為持久保存客戶端數(shù)據(jù)的方案取代了globalStorage，要訪問同一個(gè)
localStorage對(duì)象，頁面必須來自同一個(gè)域，使用同一個(gè)協(xié)議，在同一個(gè)端口上。數(shù)據(jù)保存到通過JavaScript刪除或用戶瀏覽器清除緩存。
5. IndexedDB
IndexedDB是在瀏覽器中保存結(jié)構(gòu)化數(shù)據(jù)的一種數(shù)據(jù)庫，創(chuàng)建一套API，方便保存和讀取JavaScript對(duì)象，同時(shí)支持查詢及搜索，用于客戶端存儲(chǔ)大量結(jié)構(gòu)化數(shù)據(jù)。IndexedDB是一種類似SQL數(shù)據(jù)庫的結(jié)構(gòu)化數(shù)據(jù)存儲(chǔ)機(jī)制。它的數(shù)據(jù)不是保存在表中，而是保存在對(duì)象存儲(chǔ)空間中。創(chuàng)建對(duì)象存儲(chǔ)空間時(shí)，需要定義一個(gè)鍵，再添加數(shù)據(jù)?？梢允褂糜螛?biāo)在對(duì)象存儲(chǔ)空間中查詢特定的對(duì)象，索引是為了提高查詢速度基于特定的屬性創(chuàng)建的。
- 在數(shù)據(jù)庫上調(diào)用
transaction()方法創(chuàng)建事務(wù)，數(shù)據(jù)的讀取和修改必須要通過事務(wù)來組織操作，取得事務(wù)的索引后，使用objectStore()方法并傳入存儲(chǔ)空間的名稱，就可以訪問特定的存儲(chǔ)空間。使用事務(wù)可以直接通過已知的鍵檢索整個(gè)對(duì)象。 - 在需要檢索多個(gè)對(duì)象的情況下，需要在事務(wù)內(nèi)創(chuàng)建游標(biāo)，游標(biāo)是一個(gè)指向結(jié)果集的指針，游標(biāo)指針先指向結(jié)果中的第一項(xiàng)，在接到查找下一項(xiàng)的指針時(shí)，才會(huì)指向下一項(xiàng)。在對(duì)象存儲(chǔ)空間上調(diào)用
openCursor()方法創(chuàng)建游標(biāo)。
