將ContextHub添加到頁面並訪問儲存

將ContextHub新增至您的頁面,以啟用ContextHub功能並連結至ContextHub Javascript程式庫。

ContextHub Javascript API可讓您存取ContextHub管理的上下文資料。 本頁簡要說明API存取和控制上下文資料的主要功能。 依循API參考檔案的連結,以檢視詳細資訊和程式碼範例。

將ContextHub新增至頁面元件

若要啟用ContextHub功能並連結至ContextHub Javascript程式庫,請在您頁面的head區段中包含contexthub元件。 頁面元件的HTL程式碼應類似下列範例:

<sly data-sly-resource="${'contexthub' @ resourceType='granite/contexthub/components/contexthub'}"/>

請注意,您也需要設定ContextHub工具列是否顯示在「預覽」模式中。 請參閱顯示和隱藏ContextHub UI

關於ContextHub儲存

使用ContextHub儲存區來保存上下文資料。 ContextHub提供下列類型的商店,這些商店是所有商店類型的基礎:

所有儲存類型都是ContextHub.Store.Core類的副檔名。 有關建立新商店類型的資訊,請參閱建立自定義商店。 如需範例商店類型的詳細資訊,請參閱範例ContextHub商店候選者

持久性模式

Context Hub儲存區使用下列永續性模式之一:

  • 本機:使 用HTML5 localStorage來保存資料。本機儲存區會跨作業持續存在於瀏覽器上。
  • 工作階段: 使用HTML5 sessionStorage來保存資料。會話儲存在瀏覽器會話期間持續存在,並且可用於所有瀏覽器窗口。
  • Cookie:使 用瀏覽器對Cookie的原生支援來儲存資料。在HTTP請求中,Cookie資料會傳送至伺服器或從伺服器傳送。
  • Window.name:使 用window.name屬性保存資料。
  • 記憶體: 使用Javascript物件來保存資料。

預設情況下,Context Hub使用本地持久性模式。 如果瀏覽器不支援或允許HTML5 localStorage,則會使用「作業」永續性。 如果瀏覽器不支援或允許HTML5 sessionStorage,則會使用Window.name永續性。

存放資料

在內部,將資料表單儲存為樹結構,以便將值添加為主要類型或複雜對象。 添加複雜對象到儲存時,對象屬性在資料樹中形成分支。 例如,下列複雜物件會新增至名為location的空白商店:

Object {
   number: 321,
   data: {
      city: "Basel",
      country: "Switzerland",
      details: {
         population: 173330,
         elevation: 260
      }
   }
}

儲存資料的樹結構可概念化如下:

/
|- number
|- data
      |- city
      |- country
      |- details
            |- population
            |- elevation

樹結構將儲存中的資料項定義為鍵/值對。 在上例中,鍵/number與值321對應,鍵/data/country與值Switzerland對應。

控制對象

ContextHub提供ContextHub.Utils.JSON.tree類別,以控制Javascript物件。 在您將Javascript物件新增至商店或從商店取得之前,請使用此類別的函式來控制這些物件。

此外,ContextHub.Utils.JSON類別還提供函式,用於序列化物件以區隔,以及將字串反序列化至物件。 使用此類別處理JSON資料,以支援本機不包含JSON.parseJSON.stringify函式的瀏覽器。

與ContextHub儲存庫交互

使用ContextHub Javascript物件,以Javascript物件形式取得商店。 在您取得儲存物件後,就可以控制它包含的資料。 使用getAllStoresgetStore函式來取得商店。

訪問儲存資料

ContexHub.Store.Core Javascript類別定義了與儲存資料交互的幾個函式。 下列函式可儲存和擷取物件中包含的多個資料項目:

個別資料項目會儲存為一組索引鍵/值配對。 要儲存和檢索值,請指定相應的鍵:

請注意,自訂商店申請人可定義其他功能,以提供存取儲存資料的功能。

注意

ContextHub預設不會知道目前登入的發佈伺服器上使用過,且ContextHub會將這些使用者視為「匿名」。

您可以載入描述檔存放區,讓ContextHub得知已登入的使用者。 請參閱GitHub上的范常式式碼,此處

ContextHub事件

ContextHub包含事件框架,可讓您自動回應儲存事件。 每個儲存對象都包含ContextHub.Utils.Eventing對象,該對象可用作儲存的eventing屬性。 使用ononce函式將Javascript函式系結至商店事件。

使用內容中樞操控Cookie

Context Hub Javascript API提供跨瀏覽器處理Cookie的支援。 ContextHub.Utils.Cookie命名空間定義了用於建立、操作和刪除Cookie的幾個函式。

確定已解決的ContextHub區段

ContextHub區段引擎可讓您判斷哪些已註冊區段可在目前的上下文中解決。 使用ContextHub.SegmentEngine.SegmentManager類別的getResolvedSegments函式來擷取已解析的區段。 然後,使用ContextHub.SegmentEngine.Segment類別的getNamegetPath函式來測試區段。

ContextHub 區段

ContextHub區段會安裝在/conf/<site>/settings/wcm/segments節點下方。

以下區段隨WKND教學課程網站安裝。

  • 夏季

用以解決這些區段的規則概述如下:

  • 首先,使用geolocation商店來判斷使用者的緯度。
  • 然後,surferinfo store的月份資料項目會決定該緯度的季節。
警告

已安裝的區段會作為參考設定提供,以協助您建立專案專屬的設定,因此不應直接使用。

除錯ContextHub

ContextHub有許多除錯選項,包括產生記錄檔。 如需詳細資訊,請參閱設定ContextHub。

請參閱ContextHub Framework概觀

ContextHub提供診斷頁面,您可在其中查看ContextHub架構的概述。

本頁內容

Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free
Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free
Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now
Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now