【PHP】Web Storage（SessionStorage・LocalStorage）のデータを取得する

こんにちは、Ryohei（@ityryohei）です！

本記事では、PHPでWeb Storage（SessionStorage・LocalStorage）のデータを取得する方法をご紹介しています。

上記の疑問にお答えします。

では、解説していきます。

PHPでWeb Storageのデータを取得するには

Web Storageはクライアント側に保存されるデータのため、PHPで直接アクセスすることはできません。PHPでの使用が想定される共通利用のデータについては、CookieやSession（$_SESSION）を使用するべきです。

とはいえPHPでもWeb Storageのデータを利用したいという状況は少なからずあります。既存のシステムを改修する際にPHPを導入したり、納品データにWeb Storageが使用されていた等、考えられるケースは多いです。

しかしながらPHPから直接にWeb Storageのデータにアクセスすることはできません。Web StorageのデータをPHPで利用するには、バックグランドで送信されたWeb Storageのデータを受け取り、必要な処理を実行するという手順が必要になります。

PHPにWeb Storageのデータを送信する

ページ遷移の際にWeb StorageのデータをPOSTデータとしてPHPに渡してみます。Web Storageには、予め下記のスクリプトにてデータを保存しておくこととします。

ここではWeb StorageにSessionStorageを使用していますが、LocalStorageを使用される場合は適宜変更してください。

JavaScript

const obj = [
    {
        id: '1',
        name: 'ryohei',
        email: 'test@example.com',
    },
];
sessionStorage.setItem('data', JSON.stringify(obj));

続いて特定のクラスを持つa要素がのリンクがクリックされた際に、画面には表示されないform要素を生成します。form要素には、SessionStorageのデータを設定したinput要素を追加します。input要素のtype属性の値はhiddenとします。

HTML

<a class="js-submit" href="post.php">ページ遷移する</a>

JavaScript

/**
 * form要素を生成してWeb StorageのデータをPOST送信する
 * @param {string} selector 取得する要素のセレクター
 * @param {string} key Web Storageのキー
 */
const submit = (selector, key)=>{

    // 引数のselectorから要素を取得
    let a = document.querySelector(selector);

    // イベントリスナー
    a.addEventListener('click', () => {

        // 要素のデフォルトイベントキャンセル
        event.preventDefault();

        // 要素のhref取得（送信先PHP）
        let href = a.getAttribute('href');

        // 引数のkeyからSessionStorageのデータを取得
        let value = sessionStorage.getItem(key);

        // PHPにデータを送信するform要素を生成
        let form = document.createElement('form');
        form.method = 'post';
        form.action = href;

        // form要素に追加するinput要素を生成
        let input = document.createElement('input');
        input.name = key;
        input.value = value;
        input.type = 'hidden';

        // form要素にinput要素を追加
        form.appendChild(input);

        // body要素にform要素を追加
        document.body.appendChild(form);

        // formを送信（submit）
        form.submit();
    });
}
submit('.js-submit', 'data');

PHP

<?php

$json = json_decode($_POST['data'], true);
var_dump($json );

実行すると、下記のログが出力されます。

array(1) {
  [0]=>
  array(3) {
    ["id"]=>
    string(1) "1"
    ["name"]=>
    string(6) "ryohei"
    ["email"]=>
    string(16) "test@example.com"
  }
}

PHPでWeb Storageのデータを取得することができています。

シンプルにPHPでWeb Storageのデータを使用したい場合はこちらの方法で問題ありませんが、非同期で取得したい場合はスクリプトの組み方を変える必要があります。

非同期でWeb Storageのデータを取得する

非同期でWeb Storageのデータを取得します。非同期の処理にはAxiosを使用します。HTMLはJavaScripかPHPで構築して出力する必要があります。

JavaScript

<script src="https://unpkg.com/axios@1.1.2/dist/axios.min.js"></script>
<script>
    const obj = [
        {
            id: '1',
            name: 'ryohei',
            email: 'test@example.com',
        },
    ];
    sessionStorage.setItem('data', JSON.stringify(obj));

    axios.post('/test/post.php', {
        params: {
            data: sessionStorage.getItem('data'),
        }
    })
    .then((response) => {
        let json = JSON.parse(response.data);
        console.log(json);
    })
    .catch((error) => {
        console.log(error);
    })
    .finally(() => {
    });
</script>

PHP

<?php

header('Access-Control-Allow-Origin: *');
header('Access-Control-Allow-Headers: Content-Type');

// POSTデータを取得する
$post = file_get_contents('php://input');

// JSONを配列に変換する
$json = json_decode($post, true);

// ～
// PHP側で何らかの処理を実行
// ～

// 処理結果をJSONに変換する
$data = json_encode($json['params']['data']);

// 出力してJavaScriptに値を渡す
echo $data;

コンソールの出力結果です。

{
    "id": "1",
    "name": "ryohei",
    "email": "test@example.com"
}

ここではPHPでJSONを返すだけの処理を実行しておりますが、実際には複雑な処理が実行されると思います。処理の最後に処理結果をJSONに変換する必要がありますので、その点だけご注意ください。

参考：https://axios-http.com/

最後に

PHPでWeb Storageのデータを利用する場合は、JavaScriptで別途処理してあげる必要があります。

本記事ではWeb Storageにフォーカスしていますが、Web Storageだけではなく、クライアント側でのみ参照できるデータをPHPに渡す際に応用できる汎用的なテクニックです。様々なケースで役に立ちますので、覚えておくと良いかなと思います。

以上、PHPでWeb Storage（SessionStorage・LocalStorage）のデータを取得する方法のご紹介でした！