文章目錄

• 簡介
• 常用的客戶端存儲方式
• data storage的類型
• 逐出策略
• Storage API
• • estimate
  • persist
  • persisted
  • 綜合使用
• 總結(jié)

簡介

對于現(xiàn)代瀏覽器來說，為了提升效率和處理更加復(fù)雜的客戶端操作，通常都需要將數(shù)據(jù)存儲在客戶端，也就是本地磁盤上。那么這個存儲有沒有什么限制？如果數(shù)據(jù)存滿了之后，如何進行數(shù)據(jù)的淘汰和置換？

一起來看看吧。

常用的客戶端存儲方式

客戶的存儲方式都有哪些呢？

我們看一下比較常用的幾種方式：

• IndexedDB
• asm.js caching
• Cache API
• Cookies
• web storage

當然還有其他的客戶端存儲類型，比如AppCache（已經(jīng)被廢棄），File System API（非標準的API）等。

data storage的類型

通常來說，data storage有兩種方式，一種是永久性的，這種情況下通常數(shù)據(jù)會存儲比較長的時間，除非用戶選擇清除（比如清除瀏覽器緩存），否則數(shù)據(jù)將會永久保存。

一種是臨時存儲，這種情況下，數(shù)據(jù)會存儲有限的時間。數(shù)據(jù)存儲的容量是有限的，在有限的數(shù)據(jù)容量空間，我們需要一些特定的數(shù)據(jù)逐出算法來保證有效的數(shù)據(jù)不會被覆蓋。

逐出策略

在使用臨時存儲模式時，我們通常使用的逐出策略是LRU。

當?shù)竭_存儲的限額的時候，將會查找所有當前未使用的origin,然后根據(jù)最后訪問時間對他們進行排序。然后刪除最近最少使用的origin信息。

Storage API

為了統(tǒng)一和規(guī)范這些客戶端的操作API，于是引入了Storage API，通過Storage API我們可以查看可用存儲空間大小，已使用的空間大小，甚至可以控制在用戶數(shù)據(jù)清除的時候是否需要提醒用戶。

注意Storage API只適用于HTTPS的情況，并且只是部分瀏覽器支持。

為了對不同源的數(shù)據(jù)進行管理，引入了storage units（也叫做box）的概念，對于每一個源來說，都有一個storage units（Box）。

不同的storage units里面可以存儲不同類型的數(shù)據(jù)。

上圖中Origin 1中既有Web Storage，也有IndexedDB的存儲，因為并沒有達到Storage的最大值，所以還留有一定的空余空間。

Origin 2中還沒有開始存儲任何數(shù)據(jù)，所以都是空的。

Origin 3中被indexedDB存滿了，沒有任何空余空間。

為了方便管理box有兩種模式，一種叫best-effort，一種叫persistent。

best-effort模式是指瀏覽器會盡最大努力去保留數(shù)據(jù)，但是當存儲空間用完的時候，瀏覽器并不會提醒用戶可能對存儲空間的清理操作。

persistent模式將會盡可能長時間的保存用戶的數(shù)據(jù)，如果同時有best-effort和persistent模式的話，當存儲空間不足的時候，將會首先清除best-effort box。如果一定要清除persistent box，將會通知相應(yīng)的用戶。

Storage API指的就是StorageManager，它有三個非常重要的方法estimate，persist和persisted，我們看下他們的瀏覽器兼容性：

基本上，現(xiàn)代瀏覽器都支持StorageManager和它的三個方法。

下面我們分別來看一下他們的使用。

StorageManager是一個接口，用來管理存儲的權(quán)限和評估可用的空間。我們可以通過navigator.storage 或者WorkerNavigator.storage 來獲取到StorageManager。

我們看一下StorageManger的定義：

interface StorageManager {estimate(): Promise<StorageEstimate>;persist(): Promise<boolean>;persisted(): Promise<boolean>; }

estimate

estimate方法返回一個Promise，Promise中包含一個StorageEstimate對象，表示空間的使用情況和限額。

navigator.storage.estimate().then(estimate => {// estimate.quota is the estimated quota// estimate.usage is the estimated number of bytes used });

我們使用estimate來查看是否有住夠的空間進行應(yīng)用數(shù)據(jù)的存儲：

function retrieveNextChunk(nextChunkInfo) {return navigator.storage.estimate().then(info => {if (info.quota - info.usage > nextChunkInfo.size) {return fetch(nextChunkInfo.url);} else {throw new Error("insufficient space to store next chunk");}}).then( /* … */ ); }

上面是一個estimate的使用。

persist

persist方法返回一個Promise，true表示user agent已被授權(quán)，并且box mode= persistent模式。

我們看一下persist 的使用：

if (navigator.storage && navigator.storage.persist)navigator.storage.persist().then(function(persistent) {if (persistent)console.log("Storage will not be cleared except by explicit user action");elseconsole.log("Storage may be cleared by the UA under storage pressure.");});

persisted

persisted方法返回一個Promise，true表示box mode= persistent模式。

我們看一個persisted的例子：

if (navigator.storage && navigator.storage.persist) navigator.storage.persisted().then(function(persistent) {if (persistent)console.log("Storage will not be cleared except by explicit user action");elseconsole.log("Storage may be cleared by the UA under storage pressure.");});

綜合使用

之前講到了，如果是persistent模式，數(shù)據(jù)的清理需要通知用戶，下面我們看一下這個判斷該怎么寫：

Promise.all([navigator.storage.persisted(),navigator.permissions.query({name: "persistent-storage"}) ]).then(([persisted, permission]) => {if (!persisted && permission.status == "granted") {navigator.storage.persist().then( /* … */ );} else if (!persisted && permission.status == "prompt") {showPersistentStorageExplanation();} });

上面的例子，我們還使用到了Permissions API。通過Permissions API，我們來判斷用戶所擁有的權(quán)限。

Permissions API還是一個比較新的API，只有在Chrome 44和Firefox 43之后才支持。

我們可以通過navigator.permissions來獲取到Permissions API。

可以通過Permissions.query()來判斷是否具有相應(yīng)的權(quán)限。

Permissions.query將會返回一個PermissionStatus對象，這個對象代表了三個狀態(tài)：granted，prompt和denied。

我們看一個判斷權(quán)限的應(yīng)用：

function handlePermission() {navigator.permissions.query({name:'geolocation'}).then(function(result) {if (result.state == 'granted') {report(result.state);geoBtn.style.display = 'none';} else if (result.state == 'prompt') {report(result.state);geoBtn.style.display = 'none';navigator.geolocation.getCurrentPosition(revealPosition,positionDenied,geoSettings);} else if (result.state == 'denied') {report(result.state);geoBtn.style.display = 'inline';}result.onchange = function() {report(result.state);}}); }function report(state) {console.log('Permission ' + state); }handlePermission();

除了Query，我們還可以使用revoke來取消授權(quán)。

function revokePermission() {navigator.permissions.revoke({name:'geolocation'}).then(function(result) {report(result.state);});

總結(jié)

Storage API是為了統(tǒng)一客戶端存儲標準所制定的API。還在不斷的完善之中。感興趣的朋友可以多多關(guān)注它的進展。

本文作者：flydean程序那些事

本文鏈接：http://www.flydean.com/storage-api-limit/

本文來源：flydean的博客

歡迎關(guān)注我的公眾號:「程序那些事」最通俗的解讀，最深刻的干貨，最簡潔的教程，眾多你不知道的小技巧等你來發(fā)現(xiàn)！

總結(jié)

以上是生活随笔為你收集整理的Storage API简介和存储限制与逐出策略的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。