国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

Web Storage：瀏覽器端數據儲存機制

BlackMass / 3203人閱讀

摘要：接口用于腳本在瀏覽器保存數據。保存的數據都以鍵值對的形式存在。所有的數據都是以文本格式保存。事件接口儲存的數據發生變化時，會觸發事件，可以指定這個事件的監聽函數。字符串，表示發生變動的鍵名。對象，返回鍵值對所在的整個對象。

Storage 接口用于腳本在瀏覽器保存數據。兩個對象部署了這個接口：window.sessionStorage和window.localStorage。

sessionStorage保存的數據用于瀏覽器的一次會話（session），當會話結束（通常是窗口關閉），數據被清空；
localStorage保存的數據長期存在，下一次訪問該網站的時候，網頁可以直接讀取以前保存的數據。

若用戶禁用第三方cookie，那么將不允許來自第三方IFrames對Web Storage的訪問。（從Firefox 43版本開始實行）
本地存儲不同于mozStorage（Mozilla"s XPCOM interfaces to SQLite）或Session store API（an XPCOM storage utility for use by extensions）。

保存的數據都以“鍵值對”的形式存在。也就是說，每一項數據都有一個鍵名和對應的值。所有的數據都是以文本格式保存。

每個域名的存儲上限視瀏覽器而定，Chrome 是 2.5MB，Firefox 和 Opera 是 5MB，IE 是 10MB。Firefox 中，a.example.com和b.example.com共享 5MB 的存儲空間。與 Cookie 一樣，它們也受同域限制。某個網頁存入的數據，只有同域下的網頁才能讀取，如果跨域操作會報錯。

屬性和方法

Storage 接口只有一個屬性。
Storage.length：返回保存的數據項個數。

window.localStorage.setItem("foo", "a");
window.localStorage.setItem("bar", "b");
window.localStorage.setItem("baz", "c");
window.localStorage.length // 3
Storage.setItem()

Storage.setItem()方法用于存入數據。它接受兩個參數，第一個是鍵名，第二個是保存的數據。如果鍵名已經存在，該方法會更新已有的鍵值。該方法沒有返回值。

window.sessionStorage.setItem("key", "value");
window.localStorage.setItem("key", "value");

Storage.setItem()兩個參數都是字符串。如果不是字符串，會自動轉成字符串，再存入瀏覽器。

window.sessionStorage.setItem(3, { foo: 1 });
window.sessionStorage.getItem("3") // "[object Object]"

如果儲存空間已滿，該方法會拋錯。

直接賦值也是可以的：

// 下面三種寫法等價
window.localStorage.foo = "123";
window.localStorage["foo"] = "123";
window.localStorage.setItem("foo", "123");
Storage.getItem()

Storage.getItem()方法用于讀取數據。它只有一個參數，就是鍵名。如果鍵名不存在，該方法返回null。

window.sessionStorage.getItem("key")window.localStorage.getItem("key")

鍵名應該是一個字符串

Storage.removeItem()

Storage.removeItem()方法用于清除某個鍵名對應的鍵值。它接受鍵名作為參數，如果鍵名不存在，該方法不會做任何事情。

sessionStorage.removeItem("key");localStorage.removeItem("key");
Storage.clear()

Storage.clear()方法用于清除所有保存的數據。該方法的返回值是undefined。

window.sessionStorage.clear()
Storage.key()

Storage.key()接受一個整數作為參數（從零開始），返回該位置對應的鍵值。

window.sessionStorage.setItem("key", "value");
window.sessionStorage.key(0) // "key"
//結合使用Storage.length屬性和Storage.key()方法，可以遍歷所有的鍵。
for (var i = 0; i < window.localStorage.length; i++) {
  console.log(localStorage.key(i));}
storage 事件

Storage 接口儲存的數據發生變化時，會觸發 storage 事件，可以指定這個事件的監聽函數。

window.addEventListener("storage", onStorageChange);

監聽函數接受一個event實例對象作為參數。這個實例對象繼承了 StorageEvent 接口，有幾個特有的屬性，都是只讀屬性。
StorageEvent.key：字符串，表示發生變動的鍵名。如果 storage 事件是由clear()方法引起，該屬性返回null。
StorageEvent.newValue：字符串，表示新的鍵值。如果 storage 事件是由clear()方法或刪除該鍵值對引發的，該屬性返回null。
Storage.oldValue：字符串，表示舊的鍵值。如果該鍵值對是新增的，該屬性返回null。
Storage.storageArea：對象，返回鍵值對所在的整個對象。也說是說，可以從這個屬性上面拿到當前域名儲存的所有鍵值對。
Storage.url：字符串，表示原始觸發 storage 事件的那個網頁的網址。

function onStorageChange(e) {
  console.log(e.key);}
window.addEventListener("storage", onStorageChange);

它不在導致數據變化的當前頁面觸發，而是在同一個域名的其他窗口觸發。也就是說，如果瀏覽器只打開一個窗口，可能觀察不到這個事件。比如同時打開多個窗口，當其中的一個窗口導致儲存的數據發生改變時，只有在其他窗口才能觀察到監聽函數的執行。可以通過這種機制，實現多個窗口之間的通信。

例子 
function clickCounter()
{
    if(typeof(Storage)!=="undefined")
    {
        if (localStorage.clickcount)
        {
            localStorage.clickcount=Number(localStorage.clickcount)+1;
        }
        else
        {
            localStorage.clickcount=1;
        }
        document.getElementById("result").innerHTML=" 你已經點擊了按鈕 " + localStorage.clickcount + " 次 ";
    }
    else
    {
        document.getElementById("result").innerHTML="對不起，您的瀏覽器不支持 web 存儲。";
    }
}

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/107824.html

相關文章

  • localStorage實現本地儲存樹形菜單

    摘要：因為任務需要添加到樹的結構上，所以要記錄任務是添加到哪個結點上的，需要為每個樹結點添加一個作為標識以便于在結點上添加任務，樹狀結構中每個結點的按照樹的先序遍歷將結點的依次儲存于數組中。 localStorage實現本地儲存樹形菜單 最近在寫一個Todo-list的頁面，頁面布局和操作都寫完后，想要用localStorage實現本地儲存。然而對儲存數據的方法一無所知，就先去了解了web的...

    William_Sang 評論0 收藏0

  • 左手Cookie“小甜餅”，右手Web Storage

    摘要：源自阮一峰具體什么意思，請看下面的截圖就一目了然表示對象的的數量實戰網站名網站地址確認網站名查詢機制原意是小甜餅，是服務器保存在瀏覽器的一小段文本信息，屬于其中一種互聯網存儲機制。 目錄 1. Web Storage 2. Cookie機制 3. 二者的聯系與區別 1.Web Storage 1.1 概述 Web Storage是HTML5提供的一種新的瀏覽器端數據儲存機制，它提供兩...

    Nekron 評論0 收藏0

  • 深入了解瀏覽器存儲--從cookie到WebStorage、IndexedDB

    摘要：優異的性能表現，有一部分原因要歸功于瀏覽器存儲技術的提升。是服務端生成，客戶端進行維護和存儲。當超過時，它將面臨被裁切的命運。此外很多瀏覽器對一個站點的個數也是有限制的。存入讀取數據保存的數據，以鍵值對的形式存在。 前言 隨著移動網絡的發展與演化，我們手機上現在除了有原生 App，還能跑WebApp——它即開即用，用完即走。一個優秀的 WebApp 甚至可以擁有和原生 App 媲美的功...

    XGBCCC 評論0 收藏0

  • Javascript--離線應用與客戶端儲存

    摘要：在這種情況下，瀏覽器將繼續使用原應用緩存。對象對象有一個屬性，屬性的值是常量，表示應用緩存的狀態。兼容性與其他客戶端儲存方案相比，同樣也有限制，這些限制因瀏覽器圍而異。對象主要用于僅針對會話的小段數據的存儲。 開發離線Web應用需要幾個步驟: 首先確保應用知道設備是否能上網。 應用必須能訪問一定的資源(圖像,Javascript,CSS)，這樣才能正常工作。 離線檢測 naviga...

    lmxdawn 評論0 收藏0

發表評論

0條評論

最新活動
閱讀需要支付1元查看
<