Client Context详细信息 client-context-in-detail

Client Context表示动态组合的用户数据集合。 您可以使用数据确定在给定情况下要在网页上显示的内容（内容定位）。 该数据也可用于网站分析以及页面上的任何javascript。

Client Context主要包括以下方面：

要创建独立会话存储并将其添加到Client Context，或创建与Context Store组件绑定的会话存储。 AEM会安装多个可立即使用的上下文存储组件。 您可以将这些组件用作组件的基础。

有关打开Client Context、配置其显示的信息以及模拟用户体验的信息，请参阅 Client Context.

会话存储 session-stores

Client Context包括包含用户数据的各种会话存储。 存储数据来自以下来源：

Client Context框架提供 javascript API 用于与会话存储交互以读取和写入用户数据，以及侦听和响应存储事件。 您还可以为用于内容定位或其他目的的用户数据创建会话存储。

会话存储数据会保留在客户端上。 Client Context不会将数据写回服务器。 要将数据发送到服务器，请使用表单或开发自定义Javascript。

每个会话存储都是属性值对的集合。 会话存储表示（任何类型）的数据集合，其概念含义可由设计人员和/或开发人员决定。 以下示例Javascript代码定义了一个对象，该对象表示会话存储可能包含的配置文件数据：

{
  age: 20,
  authorizableId: "aparker@geometrixx.info",
  birthday: "27 Feb 1992",
  email: "aparker@geometrixx.info",
  formattedName: "Alison Parker",
  gender: "female",
  path: "/home/users/geometrixx/aparker@geometrixx.info/profile"
}

会话存储可以在浏览器会话中持久保留，或者只能在创建会话的浏览器会话中持续。

上下文存储组件 context-store-components

上下文存储组件是可添加到Client Context的AEM组件。 通常，上下文存储组件显示来自与其关联的会话存储的数据。 但是，上下文存储组件显示的信息并不限于会话存储数据。

上下文存储组件可以包含以下项目：

有关可添加到上下文存储的已安装上下文存储组件的描述，请参阅 可用的客户端上下文组件.

目标内容交付 targeted-content-delivery

用户档案信息还用于投放 目标内容.

向页面添加Client Context adding-client-context-to-a-page

将Client Context组件包含到网页的正文部分以启用Client Context。 Client Context组件节点的路径为 /libs/cq/personalization/components/clientcontext. 要包含该组件，请将以下代码添加到页面组件的JSP文件中，该文件位于 body 页面元素：

<cq:include path="clientcontext" resourceType="cq/personalization/components/clientcontext"/>

clientcontext组件会导致页面加载实施Client Context的客户端库。

Client Context UI仅在创作实例上可用。

扩展客户端上下文 extending-client-context

要扩展Client Context，请创建会话存储并（可选）显示存储数据：

创建会话存储 creating-a-session-store

为需要添加到Client Context并从中检索的数据创建会话存储。 通常，可使用以下过程创建会话存储：

在personalization.stores.kernel客户端库中包含javascript会导致在加载Client Context框架时创建存储。

会话存储的类型 types-of-session-stores

会话存储在浏览器会话期间创建并可用，或者在浏览器存储或Cookie中持久保留。 Client Context Javascript API定义了几个类，这些类表示两种类型的数据存储：

API还提供了以下类的扩展，这些类专门用于存储JSON数据或JSONP数据：

创建会话存储对象 creating-the-session-store-object

客户端库文件夹的javascript将创建并初始化会话存储。 然后，必须使用上下文存储管理器注册会话存储。 以下示例创建并注册 CQ_Analytics.SessionStore 对象。

//Create the session store
if (!CQ_Analytics.MyStore) {
    CQ_Analytics.MyStore = new CQ_Analytics.SessionStore();
    CQ_Analytics.MyStore.STOREKEY = "MYSTORE";
    CQ_Analytics.MyStore.STORENAME = "mystore";
    CQ_Analytics.MyStore.data={};
}
//register the session store
if (CQ_Analytics.ClientContextMgr){
    CQ_Analytics.ClientContextMgr.register(CQ_Analytics.MyStore)
}

为了存储JSON数据，以下示例将创建并注册 CQ_Analytics.JSONStore 对象。

if (!CQ_Analytics.myJSONStore) {
    CQ_Analytics.myJSONStore = CQ_Analytics.JSONStore.registerNewInstance("myjsonstore",{});
}

创建上下文存储组件 creating-a-context-store-component

创建上下文存储组件以在Client Context中呈现会话存储数据。 创建后，您可以将上下文存储组件拖动到Client Context上以渲染会话存储中的数据。 上下文存储组件包含以下项目：

扩展提供的上下文存储组件 extending-the-provided-context-store-components

AEM提供可扩展的常规存储和常规存储属性上下文存储组件。 存储数据的结构决定了扩展的组件：

在Sidekick中配置外观 configuring-the-appearance-in-sidekick

编辑Client Context时，上下文存储组件显示在Sidekick中。 与所有组件一样， componentGroup 和 jcr:title client context组件的属性决定了组件的组和名称。

具有 componentGroup 属性值 Client Context 默认情况下，会显示在Sidekick中。 如果对 componentGroup 属性，则必须使用设计模式手动将组件添加到Sidekick。

上下文存储组件实例 context-store-component-instances

将上下文存储组件添加到Client Context时，会在下面创建一个表示组件实例的节点 /etc/clientcontext/default/content/jcr:content/stores. 此节点包含使用组件的编辑对话框配置的属性值。

初始化Client Context后，将处理这些节点。

初始化关联的会话存储 initializing-the-associated-session-store

将init.js.jsp文件添加到组件以生成Javascript代码，该代码将初始化上下文存储组件所使用的会话存储。 例如，使用初始化脚本检索组件的配置属性，然后使用这些属性填充会话存储。

在创作实例和发布实例的页面加载中初始化Client Context时，将生成的Javascript添加到页面。 此JSP在加载和渲染上下文存储组件实例之前执行。

代码必须将文件的mime类型设置为 text/javascript，或者不执行。

以下过程将创建init.js.jsp脚本文件并添加用于设置正确mime类型的代码。 执行存储初始化的代码将随后显示。

呈现常规存储属性组件的会话存储数据 rendering-session-store-data-for-genericstoreproperties-components

使用一致的格式在Client Context中显示会话存储数据。

显示属性数据 displaying-property-data

个性化taglib提供 personalization:storePropertyTag 标记，用于显示会话存储中属性的值。 要使用标记，请在JSP文件中包含以下代码行：

<%@taglib prefix="personalization" uri="https://www.day.com/taglibs/cq/personalization/1.0" %>

标记具有以下格式：

<personalization:storePropertyTag propertyName="property_name" store="session_store_name"/>

的 propertyName attribute是要显示的存储属性的名称。 的 store attribute是已注册存储的名称。 以下示例标记显示 authorizableId 属性 profile 商店：

<personalization:storePropertyTag propertyName="authorizableId" store="profile"/>

HTML结构 html-structure

personalization.ui客户端库文件夹(https://experienceleague.adobe.com/etc/clientlibs/foundation/personalization/ui/themes/default?lang=zh-Hans)提供Client Context用于设置HTML代码格式的CSS样式。 以下代码说明了用于显示存储数据的建议结构：

<div class="cq-cc-store">
   <div class="cq-cc-thumbnail">
      <div class="cq-cc-store-property">
           <!-- personalization:storePropertyTag for the store thumbnail image goes here -->
      </div>
   </div>
   <div class="cq-cc-content">
       <div class="cq-cc-store-property cq-cc-store-property-level0">
           <!-- personalization:storePropertyTag for a store property goes here -->
       </div>
       <div class="cq-cc-store-property cq-cc-store-property-level1">
           <!-- personalization:storePropertyTag for a store property goes here -->
       </div>
       <div class="cq-cc-store-property cq-cc-store-property-level2">
           <!-- personalization:storePropertyTag for a store property goes here -->
       </div>
       <div class="cq-cc-store-property cq-cc-store-property-level3">
           <!-- personalization:storePropertyTag for a store property goes here -->
       </div>
   </div>
   <div class="cq-cc-clear"></div>
</div>

的 /libs/cq/personalization/components/contextstores/profiledata 上下文存储组件使用此结构来显示用户档案会话存储中的数据。 的 cq-cc-thumbnail 类会放置缩略图图像。 的 cq-cc-store-property-level*x* 类格式化字母数字数据：

为常规存储组件渲染会话存储数据 rendering-session-store-data-for-genericstore-components

要使用常规存储组件渲染存储数据，您需要：

识别Genericstore会话存储 identifying-the-genericstore-session-store

个性化taglib提供 personalization:storePropertyTag 标记，用于显示会话存储中属性的值。 要使用标记，请在JSP文件中包含以下代码行：

<%@taglib prefix="personalization" uri="https://www.day.com/taglibs/cq/personalization/1.0" %>

标记具有以下格式：

<personalization:storeRendererTag store="store_name"/>

实施会话存储渲染器方法 implementing-the-session-store-renderer-method

然后，会话存储将需要一个“渲染器”方法，每次需要渲染组件时都将调用该方法。 使用两个参数调用渲染器函数：

与会话存储交互 interacting-with-session-stores

使用javascript与会话存储进行交互。

访问会话存储 accessing-session-stores

获取会话存储对象以读取或写入存储数据。 CQ_Analytics.ClientContextMgr 提供对基于商店名称的商店的访问。 获取后，请使用 CQ-Analytics.SessionStore 或 CQ-Analytics.PersistedSessionStore 与存储数据交互。

以下示例获取 profile 存储，然后检索 formattedName 属性。

function getName(){
   var profilestore = CQ_Analytics.ClientContextMgr.getRegisteredStore("profile");
   if(profilestore){
      return profilestore.getProperty("formattedName", false);
   } else {
      return null;
   }
}

创建侦听器以对会话存储更新做出响应 creating-a-listener-to-react-to-a-session-store-update

会话会存储触发事件，因此可以添加侦听器并根据这些事件触发事件。

会话存储基于 Observable 模式。 它们会扩展 CQ_Analytics.Observable 提供 addListener 方法。

以下示例将侦听器添加到 update 事件 profile 会话存储。

var profileStore = ClientContextMgr.getRegisteredStore("profile");
if( profileStore ) {
  //callback execution context
  var executionContext = this;

  //add "update" event listener to store
  profileStore.addListener("update",function(store, property) {
    //do something on store update

  },executionContext);
}

检查会话存储是否已定义并初始化 checking-that-a-session-store-is-defined-and-initialized

会话存储在加载并初始化为数据后才可用。 以下因素可能会影响会话存储可用性的时间：

使用 CQ_Analytics.ClientContextUtils 对象 onStoreRegistered 和 onStoreInitialized 仅当会话存储可用时才访问这些方法。 这些方法允许您注册对会话注册和初始化事件做出响应的事件侦听器。

以下示例使用 onStoreRegistered 事件 profile 会话存储。 注册存储后，会向 update 会话存储的事件。 更新商店后， <div class="welcome"> 页面上的元素将更新为 profile 存储。

//listen for the store registration
CQ_Analytics.ClientContextUtils.onStoreRegistered("profile", listen);

//listen for the store's update event
function listen(){
 var profilestore = CQ_Analytics.ClientContextMgr.getRegisteredStore("profile");
    profilestore.addListener("update",insertName);
}

//insert the welcome message
function insertName(){
 $("div.welcome").text("Welcome "+getName());
}

//obtain the name from the profile store
function getName(){
 var profilestore = CQ_Analytics.ClientContextMgr.getRegisteredStore("profile");
 if(profilestore){
  return profilestore.getProperty("formattedName", false);
    } else {
        return null;
    }
}

从会话持久性Cookie中排除属性 excluding-a-property-from-the-sessionpersistence-cookie

要阻止 PersistedSessionStore 保留(即将其从 sessionpersistence cookie)，将属性添加到持久会话存储的非持久属性列表中。

请参阅 CQ_Analytics.PersistedSessionStore.setNonPersisted(propertyName)

CQ_Analytics.ClientContextUtils.onStoreRegistered("surferinfo", function(store) {
  //this will exclude the browser, OS and resolution properties of the surferinfo session store from the
  store.setNonPersisted("browser");
  store.setNonPersisted("OS");
  store.setNonPersisted("resolution");
});

配置设备滑块 configuring-the-device-slider

条件 conditions

当前页面必须具有相应的移动页面；仅当页面具有配置了移动转出配置( rolloutconfig.path.toLowerCase 包含 mobile)。

配置 configuration

从桌面页面切换到其移动设备等效页面时：

例如：

window.CQMobileSlider["geometrixx-outdoors"] = {
  //CSS used by desktop that need to be removed when mobile
  DESKTOP_CSS: [
    "/etc/designs/${app}/clientlibs_desktop_v1.css"
  ],

  //CSS used by mobile that need to be removed when desktop
  MOBILE_CSS: [
    "/etc/designs/${app}/clientlibs_mobile_v1.css"
  ],

  //id of the content that needs to be removed when mobile
  DESKTOP_MAIN_ID: "main",

  //id of the content that needs to be removed when desktop
  MOBILE_MAIN_ID: "main",

  //body classes used by desktop that need to be removed when mobile
  DESKTOP_BODY_CLASS: [
    "page"
  ],

  //body classes used by mobile that need to be removed when desktop
  MOBILE_BODY_CLASS: [
    "page-mobile"
  ]
};

示例：创建自定义上下文存储组件 example-creating-a-custom-context-store-component

在此示例中，您创建一个上下文存储组件，用于从外部服务中检索数据并将其存储在会话存储中：

添加地理位置组件 add-the-geoloc-component

创建CQ应用程序并添加地理位置组件。

创建地理位置编辑对话框 create-the-geoloc-edit-dialog

上下文存储组件需要一个编辑对话框。 geoloc编辑对话框将包含一条静态消息，指示没有要配置的属性。

创建初始化脚本 create-the-initialization-script

将init.js.jsp文件添加到geoloc组件，然后使用它创建会话存储、检索位置数据，并将其添加到存储。

init.js.jsp文件在页面加载Client Context时执行。 此时，Client Context Javascript API已加载，可供您的脚本使用。

呈现地理位置会话存储数据 render-the-geoloc-session-store-data

将代码添加到地理位置组件的JSP文件中，以在Client Context中呈现存储数据。

将组件添加到Client Context add-the-component-to-client-context

将位置存储组件添加到Client Context，以便在页面加载时对其进行初始化。

请参阅Client Context中的位置信息 see-the-location-information-in-client-context

在编辑模式下打开Geometrixx Outdoors主页，然后打开Client Context ，以查看位置存储组件中的数据。

创建自定义客户端上下文 creating-a-customized-client-context

要创建第二个客户端上下文，您需要复制分支：

/etc/clientcontext/default

要使用自定义的Client Context，请编辑属性
path
，如页面模板中所包含。 例如，作为的标准位置：
/libs/cq/personalization/components/clientcontext/design_dialog/items/path