JavaScriptによるCookie登録、取得、削除方法と検索履歴をCookie、ローカルストレージに保存する方法

【概要】JavaScriptでのCookieの操作についてまとめます。また、サイト内検索の検索履歴をCookieとローカルストレージに登録する方法もまとめています。Cookieの使用例としても参考になると思うので、良かったら参考にしてみて下さい。【基本操作】・Cookieに値を保存するdocument.cookie "KeyValue";・Cookieの特定の値を削除するdocument.cookie "Key; max-age0";・Cookieの全値を取得するdocument.cookie取得したCookie例"hoge1234; huga9876"・Cookieを配列で分ける上記のようにCookieの値を取得する場合、全ての値を取得します。Key毎に分けて配列に格納するには下記のようにsplitメソッドを使用します。let cookiesArray document.cookie.split("; ");【検索履歴をCookie、ローカルストレージに保存する方法】[概要]検索実行前にJavaScriptでCookieに検索ワードを登録し、画面遷移します。即時関数でCookieに登録されている検索履歴をローカルストレージに格納します。ローカルストレージに格納した値はCookieから削除します。[ソース]・検索formlt;form action"/search" method"post" onsubmit"return registerSearchWord()"lt;input type"search" name"search-word" value"" placeholder"キーワードを入力" class"search_box" requiredlt;button type"submit" value"検索"lt;/buttonlt;/form・検索実行前に検索ワードを登録するJSfunction registerSearchWord () {let date new Date();cookieKey 'search-' + date.getTime();searchWordElms document.getElementsByClassName('search_box');cookieValue searchWordElms[0].value;document.cookie cookieKey + "" + cookieValue;}・即時関数でCookieに登録されている検索履歴をローカルストレージに保存し、Cookieから検索履歴を削除するJSlt;script$(document).ready(function () {// ・Cookieを配列化して取得するlet cookiesArray document.cookie.split("; ");// ・ローカルストレージに登録する為のオブジェクト定義let searchHistory {word: '',createdAt: ''};// ・ローカルストレージに検索結果を登録し、登録したCookieを削除する// フローチャート// 1. CookieのKeyの文頭に「search-」があるCookieを使用する// 2. 検索ワードと検索時のタイムスタンプをオブジェクトに代入する// 3. ローカルストレージに検索履歴を保存する// 4. 登録したCookieを削除するfor (let cookie of cookiesArray) {if (cookie.indexOf('search-') 0) {let cookieStr cookie.replace('search-', '');let cookieArray cookieStr.split('');searchHistory.createdAt cookieArray[0];searchHistory.word cookieArray[1];localStorage.setItem(cookieArray[0], JSON.stringify(searchHistory));document.cookie 'search-' + cookieArray[0] + "; max-age0"}}});lt;/script