Liferay のフラグメントは、ページの中で使いまわせるコンポーネントの一種です。
フラグメントエディターを使用することで、サーバーデプロイせずに、軽量なモジュールとしてページを柔軟にカスタマイズできるのが特徴です。
また、大きな利点としてサイトの管理者が Liferay の UI 上でフラグメントを作成し、管理できます。
HTML、CSS、JavaScript コードから構成されており、既存のデフォルトフラグメントを使用することもあれば、ゼロからカスタムフラグメントを作成することも可能です。

それでは本題のフラグメント開発に入りますが、今回紹介するのはフラグメント内でセッション情報を保存する方法です。
単純な表示ではなく、ユーザーの操作をセッションに保存して動的に表示を生成したい時に便利な機能です。

例として、ボタンを２つ作成します。

<div class="btn btn-1" data-active="">Click me</div>
<div class="btn btn-2" data-active="">Click me</div>

ユーザーがボタンをクリックすると data-active 属性に active の値を付与し、背景色を変更するとします。

.btn[data-active="active"] {
  background-color: green;
}

しかしここで問題なのは、ユーザーがフラグメントが配置されたページから別のページに遷移する時にクリックしたボタンの情報が消え、変色したボタンは元の状態に戻ります。
最後にクリックしたボタンの状態を保ちたい時、セッションに保存する必要があります。

const btn1 = fragmentElement.querySelector(".btn-1");
const btn2 = fragmentElement.querySelector(".btn-2");

const persistedDisplayKey = "btn_" + fragmentNamespace + "_dataActive";

const c = "Click me";
const ced = "Clicked";
const buttonClickHandler = (button, buttonClass) => {
  button.addEventListener("click", () => {
    //reset data active attribute for all buttons before set current clicked button
    btn1.setAttribute("data-active", "");
    btn1.innerHTML = c;
    btn2.setAttribute("data-active", "");
    btn2.innerHTML = c;
    button.setAttribute("data-active", "active");
    button.innerHTML = ced;
    //persist the clicked button class in session storage
    Liferay.Util.SessionStorage.setItem(
      persistedDisplayKey,
      buttonClass,
      Liferay.Util.SessionStorage.TYPES.PERSONALIZATION
    );
  });
};

buttonClickHandler(btn1, "btn-1");
buttonClickHandler(btn2, "btn-2");

const updateButtonStates = () => {
  //retrieve persisted active class from session storage
  const activeButtonClass = Liferay.Util.SessionStorage.getItem(
    persistedDisplayKey,
    Liferay.Util.SessionStorage.TYPES.PERSONALIZATION
  );

  btn1.setAttribute("data-active", "");
  btn1.innerHTML = c;
  btn2.setAttribute("data-active", "");
  btn2.innerHTML = c;

  if (activeButtonClass === "btn-1") {
    btn1.setAttribute("data-active", "active");
    btn1.innerHTML = ced;
  } else if (activeButtonClass === "btn-2") {
    btn2.setAttribute("data-active", "active");
    btn2.innerHTML = ced;
  }
};

AUI().ready("aui-base", function (A) {
  updateButtonStates();
});

まずはセッションストレージに保存するためのキーを生成するが、ページの中で再利用する場合はそれぞれユニークな名前を与えなければいけないので気をつけましょう。
fragmentNamespaceはフラグメントのインスタンスごとに自動生成されるユニークな文字列なので、これを使うといいです。

次に、各ボタンにイベントリスナーを追加し、クリックイベントが発火する時に Liferay のSessionStorageにキーと「active」の状態のボタンのクラスを値として入れます。
ストレートタイプはユーザーレベルのPERSONALIZATIONを指定します。

最後にページが描画されたらupdateButtonStates()の関数を実行し、セッションに保存されたクラスの値を取得し、data-active属性を「active」にします。
これでユーザーが別のページに移動した後でも、最後にクリックされたボタンの状態が保持されます。

いかがでしょうか。
セッションストレージはフロントでユーザー固有の表示を描画するのに便利な機能です。他にもフォームの入力内容の保持や、タブの切り替え状態の保存など、ユーザーごとに情報を保存・復元することができます。
また、セッションが終了すると自動的にデータがクリアされるので、セキュリティ面では機密性の高い情報を長期間保存しないという点では安全です。
使い方次第で、ユーザーエクスペリエンスを向上させるための一助になると思います。
ぜひ活用を検討してみてください。

使用の Liferay バージョン: 2024.Q3.7