[cookieへ保存される値を配列へ格納したい]

Question

001というページを読み込んだらストレージ(cookie)に
name:test-page
value:pageName001
という言う風に、keyとvalueが入るとする

002というページを読み込んだら
name:test-page
value:pageName002
がストレージへ保存される

■やりたいこと

ページを読み込むたびにストレージへ保存されるvalueを
3件分、配列へ格納したい

・イメージ

test-page
┗pageName001
pageName002
pageName003

Answer 1

こんな感じですか？
＃動作確認はしていません。。。

// cookie書き込み
var value = [ 'pagename001', 'pagename002' ];
document.cookie = 'name=test-page';
document.cookie = 'value=' + JSON.stringify(encodeURIComponent(value));

// cookieからvalueを取得
var valueString = getCookie('value');
value = JSON.parse(valueString);

// valueに「pagename003」を追加してcookie書き込み
value.push('pagename003');
document.cookie = 'value=' + JSON.stringify(encodeURIComponent(value));

function getCookie(name) {
    var result = null;
    var cookieName = name + '=';
    var allcookies = document.cookie;
    var position = allcookies.indexOf(cookieName);
    if (position != -1) {
        var startIndex = position + cookieName.length;
        var endIndex = allcookies.indexOf(';', startIndex);
        if (endIndex == -1) {
            endIndex = allcookies.length;
        }
        result = decodeURIComponent(allcookies.substring(startIndex, endIndex));
    }
    return result;
}

Comments

[star24star]

ご回答有難うございます。

参考に書いてみました
ご解説いただけますと幸いでございます…。

```
import storage from 'ファイルパス';

// キーの設定
storage: {
key: {
test-page
}
}

var page = #タグをとってページ名を取得する処理(#pageName001->pageName001);
// デベロッパツールで確認
storage.setItem(storage.key, page); // test-page=pageName001が格納されている

// cookie書き込み
// var value = [ 'pagename001', 'pagename002' ];

// [Q1]ここの処理は何か？？
document.cookie = 'name=test-page';
document.cookie = 'value=' + JSON.stringify(encodeURIComponent(value));

// cookieからvalueを取得
//var valueString = getCookie('value');
var valueString = storage.getItem(storage.key, page); //valueのpageName001を取得

value = JSON.parse(valueString);

// [Q2]ここから下の処理は何か？？
// pageName001以外のページを読み込んだとき？

// valueに「pagename003」を追加してcookie書き込み
value.push('pagename003');
document.cookie = 'value=' + JSON.stringify(encodeURIComponent(value));

function getCookie(name) {
var result = null;
var cookieName = name + '=';
var allcookies = document.cookie;
var position = allcookies.indexOf(cookieName);
if (position != -1) {
var startIndex = position + cookieName.length;
var endIndex = allcookies.indexOf(';', startIndex);
if (endIndex == -1) {
endIndex = allcookies.length;
}
result = decodeURIComponent(allcookies.substring(startIndex, endIndex));
}
return result;
}
```

Answer 2

※自己解決ではない

現在：
・test-pageから取得出来るのは一ページずつのみ
  （pageName001ならvalueはpageName001だけ）
・他のページを読み込むとtest-pageに読み込んだページ名が上書きされる
   (pageName002へ移動したらvalueのpageName001はpageName002に上書き)
やりたい事：
・valueを記憶して配列へ格納させたい

import storage from 'ファイルパス';

 // キーの設定
storage: {
 key: {
  pageName{
    test-page
  }
 }
}

/* Cookieへの書き出し処理  */
var pageName = #タグをとってページ名を取得する処理(#pageName001->pageName001);
// デベロッパツールで確認
//storage.setItem(storage.key, pageName); // test-page=pageName001が格納されている
//JSON形式に変換
storage.setItem(storage.key.page, JSON.stringify(pageName));

  //-- cookie書き込み
  //-- var value = [ 'pagename001', 'pagename002' ];

  //--name=test-page -> test-pageというキーのみ取得する？
  //--document.cookie = 'name=test-page';
  //--valueをJSON.stringifyに変換する処理？
  //--document.cookie = 'value=' + JSON.stringify(encodeURIComponent(value));

/* cookieからvalueを取得 */
  //--var valueString = getCookie('value');
var valueString = JSON.parse(storage.getItem(storage.key.page)); //valueのpageName001を取得

//value = JSON.parse(valueString);


  //--valueに「pagename003」を追加してcookie書き込み
  //--↓pageName003を読み込み？
  //--value.push('pagename003');
  //--document.cookie = 'value=' + JSON.stringify(encodeURIComponent(value));

  function getCookie(name) {
    var result = null;
    var cookieName = name + '=';
    // cookieの情報すべて取得？
    var allcookies = document.cookie;
    var position = allcookies.indexOf(cookieName);
    if (position != -1) {
      var startIndex = position + cookieName.length;
      var endIndex = allcookies.indexOf(';', startIndex);
        if (endIndex == -1) {
          endIndex = allcookies.length;
      }
      // エンコード処理？
      result = decodeURIComponent(allcookies.substring(startIndex, endIndex));
    }
    return result;
  }
```

Answer 3

基本的にcookieには文字列しか格納できません。

配列を格納したい場合は、シリアライズ（文字列化）してから格納して、取得する際にアンシリアライズ（文字列からの復元）するというのが一般的なアプローチになります。

javascriptだとjsonが相性が良いですね。
自前で実装してもそんなに難しく無いですし、
jQueryであれば
参考URL
の様なプラグインを使うのが楽です。

Comments

[star24star]

ご回答有難うございます

まず一番にやりたいことは、cookieへ保存されている
name:test-page
value:pageName001,
value:pageName002,
value:pageName003
を配列に格納したいのです。
現段階では変数へ一つしか格納されないため、ページ移動すると
上書きされて前のページ名が消えてしまいます。

[tanat]

もう少し詳しく説明すると、

1．001というページを読み込んだら
1-1．test-pageキーに入っているシリアライズされたデータを読み込んで配列に展開する。データが存在し無ければ空配列を作る
1-2. pageName001を配列に格納する
1-3. cookie test-pageキーに配列をシリアライズしたものを格納する

2．002というページを読み込んだら
1-1．test-pageキーに入っているシリアライズされたデータを読み込んで配列に展開する。(このタイミングで配列にはpageName001が格納されている。)
2-2. pageName002を配列に追加する(このタイミングで配列にはpageName001とpageName002が格納されている)
2-3. cookie test-pageキーに配列をシリアライズしたものを格納する

という流れになります。
データ数を制限したければ、1-2,2-2で古い順に配列の要素を消してから追加するような処理を入れて下さい。

[star24star]

ご回答有難うございます！
なるほど！上書きされず格納することが可能なのですね！

getItemで取得して配列に格納でしょうか
読み込むたびに配列へ格納される処理方法を教えてはいただけますでしょうか

[tanat]

少し順番は違いますがhyper-drums-koさんのソースにその辺も全部書いてあるのでソースを読み直してみて下さい。

[star24star]

参考に書いてみました
ご解説いただけますと幸いでございます…。

```
import storage from 'ファイルパス';

// キーの設定
storage: {
key: {
test-page
}
}

var page = #タグをとってページ名を取得する処理(#pageName001->pageName001);
// デベロッパツールで確認
storage.setItem(storage.key, page); // test-page=pageName001が格納されている

// cookie書き込み
// var value = [ 'pagename001', 'pagename002' ];

// [Q1]ここの処理は何か？？
document.cookie = 'name=test-page';
document.cookie = 'value=' + JSON.stringify(encodeURIComponent(value));

// cookieからvalueを取得
//var valueString = getCookie('value');
var valueString = storage.getItem(storage.key, page); //valueのpageName001を取得

value = JSON.parse(valueString);

// [Q2]ここから下の処理は何か？？
// pageName001以外のページを読み込んだとき？

// valueに「pagename003」を追加してcookie書き込み
value.push('pagename003');
document.cookie = 'value=' + JSON.stringify(encodeURIComponent(value));

function getCookie(name) {
var result = null;
var cookieName = name + '=';
var allcookies = document.cookie;
var position = allcookies.indexOf(cookieName);
if (position != -1) {
var startIndex = position + cookieName.length;
var endIndex = allcookies.indexOf(';', startIndex);
if (endIndex == -1) {
endIndex = allcookies.length;
}
result = decodeURIComponent(allcookies.substring(startIndex, endIndex));
}
return result;
}
```