Velo 第０５回　他のページへデータを渡す

Wix ではページコードで使う変数の寿命はそのページがアクティブな間だけです。
ページが切り替わるたびにページ設定が初期化され、ページコードで使う変数も初期化されます。
つまり変数の値を他のページへ持って行くことはできませんし、ページが切り替わる前の値すら記憶していません。

変数の値をページの切り替えに関わらず記憶させる為にはページコード以外の仕組みが必要になります。

これを解決するのが wix-storage-frontend モジュールです。

このモジュールには保持力の違いによる３種類 local, session, memory のプロパティがあり、ページの切り替えに関わらず、サイト全般を通じてストレージの役割を果たします。
以下の例をご覧下さい。

// ページAでのコードで session をインポートする
import {session} from 'wix-storage-frontend';
// このsession ストレージに文字列 'value1' を 'prop1' という名前で記憶させる
session.setItem('prop1', 'value1');


// ページBでのコードでも session をインポートする
import {session} from 'wix-storage-frontend';
// session ストレージから 'prop1' の値(文字列'value1')を読み出して、変数 value に代入する
let value = session.getItem("prop1");

session ストレージに対し、setItem( )、getItem( ) を使ってアクセスするところがポイントです。

注意しなければならないのは文字列しか記憶できないことです。
数値の受け渡しは Number( ) や String( ) を使って型を変更する必要があります。

またオブジェクトの受け渡しは JSON.stringify( )、JSON.parse( ) を 使うのが普通です。

Velo Developer certification ４択問題にも以下の問いかけがあります。 

【設　問】
Which of the following methods can be used to transfer the value of a String variable (myVar) when navigating to a different page in your Velo app?
【選択肢】
Use wix-storage to set myVar in the browser session storage.

【設　問】
Which of the following types of storage provided by wix-storage module will be available from the browser for the longest amount of time?
【選択肢】
Local

Velo開発のご依頼はこちら

お問い合わせ | 合同会社アクトワン | ホームぺージ作成 大阪府和泉市