質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
Backbone.js

Backbone.jsはRESTfulなウェブアプリケーションを構築するJavaScriptフレームワークです。

Node.js

Node.jsとはGoogleのV8 JavaScriptエンジンを使用しているサーバーサイドのイベント駆動型プログラムです。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

3回答

5089閲覧

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

star24star

総合スコア115

Backbone.js

Backbone.jsはRESTfulなウェブアプリケーションを構築するJavaScriptフレームワークです。

Node.js

Node.jsとはGoogleのV8 JavaScriptエンジンを使用しているサーバーサイドのイベント駆動型プログラムです。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

0クリップ

投稿2015/12/24 09:34

編集2015/12/24 10:11

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

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

■やりたいこと

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

・イメージ

test-page
┗pageName001
pageName002
pageName003

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答3

0

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

Javascript

1// cookie書き込み 2var value = [ 'pagename001', 'pagename002' ]; 3document.cookie = 'name=test-page'; 4document.cookie = 'value=' + JSON.stringify(encodeURIComponent(value)); 5 6// cookieからvalueを取得 7var valueString = getCookie('value'); 8value = JSON.parse(valueString); 9 10// valueに「pagename003」を追加してcookie書き込み 11value.push('pagename003'); 12document.cookie = 'value=' + JSON.stringify(encodeURIComponent(value)); 13 14function getCookie(name) { 15 var result = null; 16 var cookieName = name + '='; 17 var allcookies = document.cookie; 18 var position = allcookies.indexOf(cookieName); 19 if (position != -1) { 20 var startIndex = position + cookieName.length; 21 var endIndex = allcookies.indexOf(';', startIndex); 22 if (endIndex == -1) { 23 endIndex = allcookies.length; 24 } 25 result = decodeURIComponent(allcookies.substring(startIndex, endIndex)); 26 } 27 return result; 28}

投稿2015/12/24 13:30

hyper-drums-ko

総合スコア736

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

star24star

2015/12/25 02:35 編集

ご回答有難うございます。 参考に書いてみました ご解説いただけますと幸いでございます…。 ``` 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; } ```
guest

0

※自己解決ではない

現在: ・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; } ```

投稿2015/12/25 03:40

star24star

総合スコア115

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

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

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

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

投稿2015/12/24 10:29

tanat

総合スコア18709

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

star24star

2015/12/24 10:48

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

2015/12/24 13:47

もう少し詳しく説明すると、 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

2015/12/25 00:32

ご回答有難うございます! なるほど!上書きされず格納することが可能なのですね! getItemで取得して配列に格納でしょうか 読み込むたびに配列へ格納される処理方法を教えてはいただけますでしょうか
tanat

2015/12/25 02:08

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

2015/12/25 02:33

参考に書いてみました ご解説いただけますと幸いでございます…。 ``` 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; } ```
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問