現(xiàn)如今好多瀏覽器都有「隱身模式」，Safari 管這叫「Private Browing」，國(guó)內(nèi)各種牌子的套殼瀏覽器叫「無痕瀏覽」。私以為從命名上來說，倒是國(guó)內(nèi)更中文一些。

這種模式下瀏覽網(wǎng)頁踏雪無痕，雁過不留聲。具體來說，與正常模式的區(qū)別是瀏覽器不會(huì)保存歷史記錄，沒有頁面緩存，所有本地?cái)?shù)據(jù)也都是臨時(shí)的，頁面關(guān)閉后無法還原。譬如本文下面要講到的 localStorage。

--------- LOG ---------00:01:00 - 一位不具名用戶在零點(diǎn)零一分進(jìn)行了訪問00:02:00 - 一位不愿透露姓名的用戶在零點(diǎn)零二分打開了你丟棄在服務(wù)器 `社會(huì)科學(xué)/東方藝術(shù)鑒賞/東瀛國(guó)浮世繪` 中的資源 `ae2bx86.jpg`

從功能上來說，普通用戶大概鮮有人知道這一功能（產(chǎn)品情懷就這樣被用戶無視，PM 們默默淚目），而開發(fā)者則利用其干凈的特點(diǎn)來開發(fā)調(diào)試，排除程序之外的因素導(dǎo)致 bug 的可能。

因?yàn)樗斜镜財(cái)?shù)據(jù)都是臨時(shí)的，那么問題來了，如果網(wǎng)頁代碼中還使用了諸如 localStorage 的本地存儲(chǔ)，還能生效嗎？

答案是肯定的，但只針對(duì)本次訪問。這個(gè)肯定只限于桌面瀏覽器。 而手機(jī)端則不然。

iOS 上 Safari private 模式下瀏覽器假裝支持 localStorage，并在全局 window 上暴露了該方法。但是當(dāng)你在調(diào)用 localStorage.setItem 進(jìn)行保存的時(shí)候就會(huì)報(bào) QUOTA_EXCEEDED_ERR 錯(cuò)。

QUOTA_EXCEEDED_ERR:DOM Exception 22:An attempt was made to add something to storage...

考察下面的測(cè)試代碼：

<button class="setValue">SET</button><hr><button class="getValue">GET</button><script>
    var q = document.querySelector;
    document.querySelector('.setValue').onclick = function () {
        try {
            var time = new Date().getTime();
            localStorage.setItem('time', time);
            alert('set '+time);
        } catch (error) {
            alert(JSON.stringify(error));
        }
    }
    document.querySelector('.getValue').onclick = function () {
        var content = localStorage.getItem('time', new Date().getTime());
        alert('got '+content);
    }</script>

我在頁面放了兩個(gè)按鈕，一個(gè)用于向?yàn)g覽器保存值，一個(gè)用于獲取。

下面是測(cè)試結(jié)果：

  • iOS Safari 隱私模式設(shè)置值

  • iOS Safari 隱私模式獲取值

  • iOS Chrome 隱私模式設(shè)置值

  • iOS Chrome 隱私模式獲取值

這表明在 iOS 上，不僅是 Safari 在隱私模式中不能使用 localStorage, Chrome 也不行也不行。這不禁讓人懷疑跟系統(tǒng)平臺(tái)的策略有關(guān)。

博主是谷粉，很早就入手了 Nexus。本著嚴(yán)謹(jǐn)?shù)淖鍪聭B(tài)度，那肯定也得拿來測(cè)試一下丫。而安卓機(jī)上的測(cè)試則讓人無法接受。

  • 安卓 Chrome 隱私模式下設(shè)置值

  • 安卓 Chrome 隱私模式下獲取值

是的，安卓上面并沒有表現(xiàn)出假裝支持 localStorage，而是真正的支持，能存能取，能取能用！再次證實(shí)了上面的懷疑，這種假裝的支持應(yīng)該是 iOS 的設(shè)計(jì)哲學(xué)。

回過頭來想，隱私模式主要的功能不就是讓用戶的數(shù)據(jù)不被追蹤嗎，如果能夠存取數(shù)據(jù)的話，反而沒那么隱私了。從這點(diǎn)來說，localStorage 設(shè)置不成功倒也考量了些許人文情懷在里面。

問題想當(dāng)于回到了開發(fā)者手中，我們?cè)陂_發(fā)過程中使用 loaclStorage 就需要對(duì)這種情況進(jìn)行兼容，以避免 js 報(bào)錯(cuò)后影響整個(gè)頁面的功能。

下面是兼容代碼示例：

function isLocalStorageSupport(){
    try {
        var isSupport = 'localStorage' in window && window['localStorage'] !== null;
        if (isSupport) {
            localStorage.setItem('__test', '1');
            localStorage.removeItem('__test');
        }
        return isSupport;
    } catch (e) {
        return false;
    }}

為此，我們可以考慮提取一個(gè)輔助類來封裝 localStorage，這樣就可以隨時(shí)隨地放心使用。

Feel free to repost but keep the link to this page please!

http://www.cnblogs.com/Wayou/p/7039707.html