localStorage、SessionStorage、Cookieの操作方法

序文：

vue の使用は、一般的には`store`データストレージのツールとしてのみ使用されますが、基本的なフロントエンドデータストレージは、場合によっては依然として非常に役立ちます。

1. 基礎知識

localStorage と sessionStorage

両方のプロパティは同じ Storage オブジェクトを表します - 文字列でインデックス付けされた永続的な連想配列で、保存された値も文字列です。
両者の違いは保管期間と保管範囲にあります

保存されたlocalStorageデータは永続的です. Web アプリケーションが保存されたデータを意図的に削除するか、ユーザーがブラウザーの構成 (ブラウザーによって提供される特定の UI) を設定して削除しない限り、データは常にユーザーのコンピューターに保存され、期限切れになることはありません。

localStorageThe scope of the document is limited to the document source (determined by the protocol, host name and port). 同じソースのドキュメントは同じ localStorage データを共有し、互いのデータを読み取ったり、互いのデータを上書きすることさえできます。
異なるオリジンのドキュメントは、互いのデータを読み取ったり上書きしたりすることはできません。
localStorageの範囲は、ブラウザベンダーによっても制限されます。

SessionStorageデータを格納するスクリプトが存在する最上位のウィンドウまたはブラウザタブと同じように有効です。ウィンドウまたはタブが完全に閉じられると、SessionStorageストアを通過したすべてのデータも削除されます。
SessionStorageスコープもドキュメントソースに限定され、ウィンドウにもスコープが限定されます。

cookie の名前と値に加えて、有効期間とスコープ
cookieを制御するオプションの属性がいくつかあります. デフォルトの有効期間は非常に短いです. 有効期間を延長したい場合は、属性のスコープを設定できます(単位 s )を使用して、ドキュメントソースとドキュメントパスを特定します。パスは、Cookie の属性を設定することで特定できます。cookie
cookiemax-age
cookiepath

2. 関連する方法

ローカルストレージ

新しいローカルストレージ

const localStorageSet = (key, value) => {
    
    
 if (!key) return
 if (typeof value !== 'string') {
    
    
   value = JSON.stringfy(value)
 }
 window.localStorage.setItem(key, value)
}

export default localStorageSet

localStorage を取得する

const localStorageGet = (key) => {
    
    
 if (!key) return;
 return window.localStorage.getItem(key)
}

export default localStorageGet

ローカルストレージを削除

const localStorageRemove = (key) => {
    
    
 if (!key) return;
 window.localStorage.removeItem(key)
}

export default localStorageRemove

セッションストレージ

新しいセッションストレージ

const sessionStorageSet = (key, value) => {
    
    
 if (!key) return;
 if (typeof value !== 'string') {
    
    
   value = JSON.stringify(value)
 }
 window.sessionStorage.setItem(key, value)
}

export default sessionStorageSet

セッションストレージを取得する

const sessionStorageGet = (key) => {
    
    
 if(!key) return;
 return window.sessionStorage.getItem(key)
}

export default sessionStorageGet

セッションストレージを削除

const sessionStorageRemove = (key) => {
    
    
 if (!key) return;
 window, sessionStorage.removeItem(key)
}

export default sessionStorageRemove

クッキー

新しいクッキー

const setCookie = (key, value, expire) => {
    
    
 const d = new Date()
 d.setDate(d.getDate() + expire)
 document.cookie = `${
      
      key}=${
      
      value};expires=${
      
      d.toUTCString()}`
}

export default setCookie

クッキーを取得

const getCookie = (key) => {
    
    
 const cookieStr = decodeURIComponent(document.cookie)
 const arr = cookieStr.split('; ')
 let cookieValue = ''
 for (let i = 0; i < arr.length; i++) {
    
    
   const temp = arr[i].split('=')
   if (temp[0] === key) {
    
    
     cookieValue = temp[1]
     break
   }
 }
 return cookieValue
}

export default getCookie

クッキーを削除する

const delCookie = (key) => {
    
    
 document.cookie = `${
      
      encodeURIComponent(key)}=;expires=${
      
      new Date()}`
}

export default delCookie

3. 閲覧方法

関連情報はアプリケーションで表示できます
ここに画像の説明を挿入

4.参考文献

【1】JavaScript 公式ガイド
【2】https://mp.weixin.qq.com/s/aU2LMBB9KJTinyIAybuzLg