Webストレージ(妙味)

2371 ワード

  • Cookie

  • データはコンピュータに格納、ブラウザ制御によりデータ
  • の追加と削除を行う.
  • Cookieの特徴

  • ストレージ制限
  • ドメイン名100個のクッキー、各グループ値サイズ4 KB
  • クライアント、サーバ側は、いずれもサーバ(ヘッダ情報)
  • を要求する.
  • ページ間のクッキーは共有
  • です
  • Storage

  • sessionStorage session一時回話、ページが開くからページが閉じるまでの期間のウィンドウの一時記憶、ページが閉じる、ローカル記憶が消える
  • .
  • localStorage永続ストレージ(手動でデータを削除可能)
  • Storageの特徴

  • メモリ量制限(5 M)
  • クライアントは完了し、サーバ処理
  • を要求しない.
  • sessionStorageデータは共有せず、localStorage共有
  • Storage API

  • setItem():データを設定し、keyvalueタイプ、タイプは文字列であり、属性を取得する形式で
  • を操作することができる.
  • getItem():データを取得し、keyによって対応するvalue
  • を取得する
  • removeItem():データを削除し、keyによって対応するvalue
  • を削除します.
  • clear():保存されている値をすべて削除
  • Storage API 2

  • 保存イベント:-データが変更または削除された場合、storageイベントがトリガーされます-データが変更されたウィンドウオブジェクトではトリガーされません-Key:変更または削除されたkey値、clear()が呼び出された場合、keyはnull-newValue:新しく設定された値、removeStorage()が呼び出された場合、keyはnull-oldValue:変更前のvalue値を呼び出す-storageArea:現在のstorageオブジェクト-url:スクリプトの変更をトリガーするドキュメントのurl-注:sessionはウィンドウと同じで、例:iframe操作
  • 
         



    var inputs=document.getElementsByTagName("input"); var len=inputs.length; for(var i=0;i<len;i++){ inputs[i].onclick=function(e){ if(this.checked){ window.localStorage.setItem("sel",this.value); }else{ window.localStorage.setItem("nosel",this.value); } } } window.addEventListener("storage",function(e){ console.log(1111); if(e.key==="sel"){ for(var i=0;i<len;i++){ if(inputs[i].value===e.newValue){ inputs[i].checked=true; } } }else if(e.key==="nosel"){ for(var i=0;i<len;i++){ if(inputs[i].value===e.newValue){ inputs[i].checked=false; } } } })