JSでJSON.stfingifyしても、配列が文字列に変換できない

Question

前提・実現したいこと

以下の連想配列（JSオブジェクト）を、クッキーに保存したいです。

{ key1: true, key2: false }

発生している問題・エラーメッセージ

JSON.stfingifyしても、配列が文字列に変換できません。

該当のソースコード

おおまかな流れですが、このような感じです。以下ですとクッキーの保存にそのまま配列を入れているので当然ダメです。

そこで「試したこと」にあるコードを実行しましたが、いずれもダメでした。

const key1 = 'key1';
const key2 = 'key2';
let data = [];
data[key1] = true;
data[key2] = false;
$.cookie( 'data', data ); // 文字列で保存しなければならないのでダメ

試したこと

ざっと思いついたものは下記のように試したのですが、コメントアウトしてある通りできませんでした。

正しい処理や他に試すことをご存じの方いらっしゃいますでしょうか？

console.log( data ); // 正しい形式だがクッキーは保存できない
console.log( data.join(',') ); // null になってしまう
console.log( JSON.stringify(data) ); // []になってしまう
console.log( JSON.stringify(data,null,'\t') ); // []になってしまう

補足情報（FW/ツールのバージョンなど）

クッキーの保存には以下のプラグインを使用しております。
jquery.cookie.js v1.4.1

Answer 1

自由なキーで保存したいのなら、let data = {}とオブジェクトにしてください。

[]で作った配列にも文字列の名前のキーで値を格納すること自体はできますが、JSON.stringifyするとそれらはすべて無視されます。

Comments

[kaminarikun]

JSON.stringify() は配列に使えないんですね。ありがとうございました。他の方へのコメントも参考になりました。

Answer 2

jQuery.cookie

まず、公式ドキュメントを読んでください。
jQuery.cookie はオプション(json)を指定すれば、「JSONに変換可能なオブジェクト」を格納できます。

• carhartl/jquery-cookie: No longer maintained, superseded by JS Cookie:

json

Turn on automatic storage of JSON objects passed as the cookie value. Assumes JSON.stringify and JSON.parse:

$.cookie.json = true;

new Map

次に、JavaScriptに連想配列はありません。
配列的な機構が必要なら、new Map を使用して下さい。

• jQuery.cookie - JSFiddle
• JavaScript - javascriptで連想配列のソート｜teratail

'use strict';
jQuery.cookie.json = true;  // Turn on automatic storage of JSON objects passed as the cookie value. Assumes JSON.stringify and JSON.parse:

jQuery.cookie('data', [['key1', true], ['key2', false]]); // Create session cookie:

const map = new Map(jQuery.cookie('data')); // Read cookie:

console.log(map.get('key1')); // true
console.log(map.get('key2')); // false

map に書き込んだデータを Cookie に書き戻すには、Array.from で二次元配列に変換します。

map.set('key1', false);
map.set('key2', true);

jQuery.cookie('data', Array.from(map)); // Create session cookie:

Re: kaminarikun さん

Comments

[maisumakun]

MapはJavaScript内で使うには結構便利なんですが、JSONとの相性が悪すぎるのがこの場面ではネックになりそうです。

[think49]

@maisumakun さん
new Mapは二次元配列と相互変換可能なので、JSONとの相互変換にも支障がないと考えています。
const array = [['key1', true], ['key2', false]], map = new Map(array);
console.log(JSON.stringify(array) === JSON.stringify(Array.from(map))); // true

[kaminarikun]

詳細にありがとうございます。ドキュメント読まないといけませんね。普通に使えたとは知りませんでした。
Mapの使い方も詳しくありがとうございます。勉強になりました。

Answer 3

質問のコードは配列オブジェクト（data）のプロパティを追加定義する処理になっています。

data[key1] = true;  // {Array}.key1 = true, 配列内は [] のまま
:

JSON.stringify() は 配列オブジェクトのプロパティを評価しないため、結果が空の配列になります。

ご所望の結果を得るには、数値添字か、data.push( key ) ですね。
試すことを書きましたが、既に正答が示されていますね。

Comments

[kaminarikun]

JSON.stringify() は配列に使えないんですね。ありがとうございました。

[AkitoshiManabe]

配列に使えないのではなく、配列要素だけを評価するんです。

Answer 4

const d1 = []
d1.key1 = true
d1.key2 = false

d1.__proto__.constructor
>>> ƒ Array() { [native code] }

JSON.stringify(d1) // NG

この書き方で生成されるのは配列オブジェクトであり、~~JSON.stringify()の引数として正しくありません。
JSON.stringify()の引数は純粋なJavaScriptオブジェクトである必要があるため、~~以下のように記述します。

const d2 = {}
d2.key1 = true
d2.key2 = false

d2.__proto__.constructor
>>> ƒ Object() { [native code] }

JSON.stringify(d2) // OK

Comments

[maisumakun]

配列も数値添字であれば、問題なくJSON.stringifyできます（配列型もJSONに存在する型の1つです）。

[sfwlma]

そうなんですね。
勉強になりました。
失礼しました。

[kaminarikun]

いまいち配列とオブジェクトが区別できてませんでした。ありがとうございました。

Answer 5

data.join(',')してからJSON.stringify(data)しているから空配列になっているだけだと思います。

// console.log( data.join(',') ); // null になってしまう
   console.log( JSON.stringify(data) ); // []になってしまう

Comments

[maisumakun]

.joinは破壊的なメソッドではなく、別に文字列を生成します。

[kei344]

To: maisumakunさん
あ、「let data = [];」だから「[]になってしまう」ですね。

[kaminarikun]

ご説明ありがとうございます。勉強になりました。