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

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

新規登録して質問してみよう
ただいま回答率
85.48%
Cookie

HTTPにおけるCookieとは、クライアントのウェブブラウザ上に保存された一時的なデータを指します。クライアント側のJavaScriptでも、サーバー側のHTTPヘッダーでもクッキーの読み書き・修正・削除が可能です。

JavaScript

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

Q&A

解決済

1回答

1873閲覧

ユーザー側に既にCoookieで365日期間設定で保存されている画像をこちらから削除することができますか?

hyskyo

総合スコア79

Cookie

HTTPにおけるCookieとは、クライアントのウェブブラウザ上に保存された一時的なデータを指します。クライアント側のJavaScriptでも、サーバー側のHTTPヘッダーでもクッキーの読み書き・修正・削除が可能です。

JavaScript

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

0グッド

0クリップ

投稿2016/04/14 06:15

編集2016/04/15 06:28

ユーザー側で既に保存されている画像をこちらから何で削除か非表示にして、これから新らしい画像を保存してもらうようにしたいです。どうぞ誰かがご教授お願いいたします。

これでは試してみましたができませんでした。 function deleteCookie( $.cookie('favorite') ){ document.cookie = $.cookie('favorite') + "=; expires=Fri, 15 April 2016 13:00:00 GMT"; }

ソースコードは下記に記載してあるのと同じです
https://teratail.com/questions/31620

下記は一覧表示するファイルlist.html:

<!DOCTYPE html> <html lang="ja"> <head> <script src="./jquery-1.11.3.min.js"></script> <script src="./jquery.cookie.js"></script> <script type="text/javascript" charset="utf-8"> $(function() { $(document).ready( function(){ var book = $.cookie('favorite'); if (book == null) { $('#list').append('空空^^'); } else{ book = $.cookie('favorite'); book = JSON.parse(book); book.reverse(); for (var i = 0; i < book.length; i++) { book[i] = book[i].substring(book[i].lastIndexOf('_0') + 2, book[i].length); var d = book[i].split('_'); $('#list').append($('<img src="' + d[1] + '"><button class="del">削除</button>')); }; } }); $(document).on('click', '.del', function() { var index = $('.del').index(this); alert('削除してもいいですか?'); var book = $.cookie('favorite'); if (book) { var book = JSON.parse(book); book.reverse(); book.splice(index, 1); book.reverse(); $.cookie('favorite', JSON.stringify(book), {'expires':365, 'path': '/'}); location.reload(true); } }); }); </script> </head> <body class="index" > <div id="list"> </div> </body> </html>

下記は登録するファイルregist.html

<!doctype html> <html lang="ja"> <head> <script src="./jquery-1.11.3.min.js"></script> <script src="./jquery.cookie.js"></script> <script> $(function () { $(document).ready( function(){ }); $('img[src="/btn_favorite.png"]').click(function () { var index = $('img[src="btn_favorite.png"]').index(this); var h2 = $('div.box_text:eq(' + index + ')').children('h2'); var img = $('div.box_main:eq(' + index + ')').find('img'); var src_para = $(this).closest('a').attr('href'); $.cookie.json = true; var data = $(h2).text() + '_' + './hontana/' + img.attr('src'); if ($.cookie('favorite') == null) { var p = []; p.push(data); $.cookie('favorite', JSON.stringify(p), {'expires':365, 'path': '/'}); } else { var book = JSON.parse($.cookie('favorite')); console.log(book); if (book.indexOf(data) == -1) { book.push(data); } $.cookie('favorite', JSON.stringify(book), {'expires':365, 'path': '/'}); } }); }); </script> </head> <body> <div class="box_main"> <div class="photo"><a href="javascript:void(0);"><img src="images/3.jpg" ></a></div> <div class="box_text"> <h2>表品A</h2> </div> </div> <table width="100%"> <tbody> <tr> <td width="50%"> <a href="" class="etc_link"><img src="/btn_favorite.png"></a> </td> </tr> </tbody> </table> <div class="box_main"> <div class="photo"><a href="javascript:void(0);"><img src="images/2.jpg" ></a></div> <div class="box_text"> <h2> 商品B</h2> </div> </div> <table width="100%"> <tbody> <tr> <td width="50%"> <a href="" class="etc_link"><img src="btn_favorite.png"></a> </td> </tr> </tbody> </table> <div class="box_main"> <div class="photo"><a href="javascript:void(0);"><img src="images/1.jpg"></a></div> <div class="box_text"> <h2> 商品C</h2> </div> </div> <table width="100%"> <tbody> <tr> <td width="50%"> <a href="" class="etc_link"><img src="/btn_favorite.png"></a> </td> </tr> </tbody> </table> </body> </html>

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

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

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

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

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

guest

回答1

0

ベストアンサー

削除するという手段があります。

JavaScript

1$.removeCookie( 'name', { path: '/' } );

【GitHub - carhartl/jquery-cookie: No longer maintained, superseded by JS Cookie:】
https://github.com/carhartl/jquery-cookie

【jquery.cookie.jsの使い方と簡単なサンプルを紹介します|Webpark】
http://weboook.blog22.fc2.com/blog-entry-404.html


また、cookie は上書きできるはずです。
regist.html の if ($.cookie('favorite') == null) 部分をちょっと書き換えました。

JavaScript

1var book; 2var cookie_data = $.cookie( 'favorite' ); 3var force_delete; 4force_delete = true; // 消したい場合これを true にする 5if ( cookie_data == null || force_delete ) { 6 book = [ data ]; // cookie が無い OR force_delete == true 7} else { 8 // 過去のデータをここで呼び出さなければ cookie に保存されることも無い 9 book = JSON.parse( cookie_data ); 10 if ( book.indexOf( data ) == -1 ) { 11 book.push( data ); 12 } 13} 14$.cookie( 'favorite', JSON.stringify( book ), { 'expires':365, 'path': '/' } );

こう書くと force_delete が毎回 true なので最新しか保存されなくなるので注意。
消したいときのみ force_deletetrue になるような設計にすればよいと思います。


質問とは関係ありませんが、関数やIF文の閉じ忘れなどを起こさないために、コードはインデントを使って整理しておいたほうがよいです。

投稿2016/04/16 20:10

kei344

総合スコア69407

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.48%

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

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

質問する

関連した質問