JavaScriptオブジェクトをCookieに保存する方法をわかりやすく解説

JavaScriptオブジェクトをCookieに保存するには？

JavaScriptのオブジェクトをCookieに保存するには、JSON.stringify()メソッドを使用します。このメソッドは、JavaScriptの値をJSON形式の文字列に変換するためのもので、オブジェクトをそのままCookieに格納することはできないため、文字列化してから保存する必要があります。

基本的な手順

Cookieに保存できるのは文字列のみです。そのため、以下の手順でオブジェクトを保存します。

1. JSON.stringify()でオブジェクトをJSON文字列に変換する
2. Cookie名と有効期限（expires）を指定してdocument.cookieに代入する

サンプルコード

以下のコードは、JavaScriptオブジェクトをCookieに保存する具体的な例です。

(function(){
    var myObject = JSON.parse('{"id":1,"gender":"male"}');
    var e = 'Thu Nov 26 2017 15:44:38';
    document.cookie = 'myObj=' + JSON.stringify(myObject) + ';expires=' + e;
})()

コードの解説

このコードでは、まずJSON.parse()を使ってJSON文字列からオブジェクトを生成しています。次に、有効期限の日時を変数eに設定し、JSON.stringify()でオブジェクトを文字列化したものをmyObjという名前のCookieとして保存しています。

保存したオブジェクトを取得する方法

Cookieから値を取り出す際は、JSON.parse()を使用して文字列を再びオブジェクトに戻します。これにより、保存時と同じデータ構造でオブジェクトを扱うことができます。

なお、Cookieには保存できるデータサイズの上限（約4KB）があるため、大きなオブジェクトを保存する場合はlocalStorageやsessionStorageなど、Web Storage APIの利用も検討するとよいでしょう。