ツイート今さらな感じもしますが、使う機会があったので忘れないように記事にしておきます。以前使ったことがあるのですが、そのときの記憶がほとんどなかったので、こういうのは残しておいたら自分のためにもなりますね。jQueryとjquery.cookieを読み込みます。ともにCDNになっているのでこちらでいいと思います。src=&quot;//cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.min.js&quot;&gt;&lt;/script&gt;jquery.cookieを自分でダウンロードされる方はこちらから。GitHubこれで準備は完了ですので、実際に使っていきます。cookieを保存まずは、cookieを保存する方法です。);これが基本形になります。オプションとして保存期間等を指定することができます。}この場合、このようになります。cookie名「sample」に「テスト」という値を保存することになります。オプションの部分はこういう感じになります。7保存する期間になります。この場合7日間になります。"/"保存するパス名を指定します。この場合はサイト全体で利用することができます。"sample.com"有効となるドメインを指定します。trueセキュアな通信のときのみ送信します。オプションですので、指定は任意です。実際は最初の2つだけで十分かなと思います。次に保存したcookieを取得する方法です。)これで、保存した値が呼び出されます。最後に保存したcookieを削除する方法です。);これで保存したcookieが削除されます。jquery.cookie.jsの使用例これだけ聞いても実際にどうやって使うかわからないと思うので、簡単な使い方を紹介します。「クリックで開閉するパネルがあって、ページの更新やページを移動してもパネルの状態が維持される」というのをしてみます。でき上がりはこちらのリンクからご覧ください。cookieを使った開閉状態を維持するパネルということで簡単に説明します。id=&quot;panel&quot;&gt;開いた状態でページ更新しても開いたままです。id=&quot;panel-btn&quot;&gt;panel&lt;/a&gt;CSSは特に問題ないと思いますので省略します。非表示にしているので気をつけてください。メインのjQueryの部分です。});});ポイントごとで解説します。}これはページを開いた際に実行されることになります。パネルを開いた状態で画面を閉じた場合、後で解説するようにcookie「open-panel」が保存されていますので、ここでパネルを開くようにします。今回は、あるかないかを判断するだけですが、cookieの値も考慮する場合は以下のようにします。if」を組み合わせると、cookieの値によって分岐させることもできます。});こちらはクリックした場合の動きに関する部分です。if内については、cookie「open-panel」がある場合です。cookie「open-panel」があるということは、パネルが開いている状態です。したがって、クリックした際の動きは、【パネルを閉じる】【サイト全体のcookieを削除する】ということになります。else内は、cookie「open-panel」がない場合になります。最初はcookieがない状態なので、この部分の動作になります。最初はパネルが閉じている状態ですので、クリックした際の動きは、【パネルを開く】【cookie「open-panel」に値「open」を7日間サイト全体で保存する】ということになります。cookieの名前と値は何でもいいです。値が数値の場合は、ダブルコーテーションはなくても大丈夫です。cookieについて、個人的にあまり使うこともないので、忘れないうちに書いてみました。今回は、パネル開閉の際に使ってみましたが、他にもレイアウト、フォントサイズやカラー、背景色の変更なんかにも使えるかもしれないです。使いやすいのでぜひ使ってみてください。何かの参考になればうれしいです。ウェブサイト作成に役立つことをいろいろと@webpark2さんのツイートこの記事に付いているタグの最新記事一覧loading...コメントNAME:URL:COMMENT:PASS:※コメントはご意見ご感想や間違いのご指摘等にしていただけますようお願いいたします。コメントを確認する時間がなく、技術的なご質問をいただいても答えできません。申し訳ございませんがご理解のほどお願いいたします。TweetWebparkについて和歌山に住むごく普通のサラリーマンです。趣味でウェブサイト作成に関することをいろいろと勉強しています。役立ちそうな内容をまとめてブログに載せています。