sessionStorageとlocalStorageの使用上の注意事項

5421 ワード

まず私がこの最も記録したいことを書いて、それから彼らの基本的な使い方を書いています.
注意事項
sessionStorageとlocalStorageは、オブジェクトを格納する際にチャネル文字列タイプの値しか得られず、所望の値を得ることができません.例を見てみましょう.
  var obj1 = {
      name: 'a1',
      age: 1
  }
  window.localStorage.setItem('obj1', obj1)
  console.log('  ',localStorage.obj1) //    [object Object]

  var arr1 = ['a','b','c']
  window.localStorage.setItem('arr1', arr1)
  console.log('  ',localStorage.arr1) //    a,b,c

  var arrObj = [
      {name:'arrObj', age: 1}
  ]
  window.localStorage.setItem('arrObj', arrObj)
  console.log('    ',localStorage.arrObj) //      [object Object]

  var boolean1 = true
  window.localStorage.setItem('boolean1', boolean1)
  console.log('   ',localStorage.boolean1);  //     true

  var str1 = 'abcdefg'
  window.localStorage.setItem('str1', str1)
  console.log('   ',window.localStorage.str1); //     abcdefg

  var num1 = 110
  window.localStorage.setItem('num1', num1)
  console.log('  ',window.localStorage.num1); //    110

  var date1 = new Date()
  window.localStorage.setItem('date1', date1)
  console.log('  ',window.localStorage.date1); //    Wed Jan 03 2018 15:00:48 GMT+0800 (CST)

上から分かるように、無路は文字列、数字、ブール値は同じ値を望んでいるがタイプは文字列であり、配列は配列オブジェクトではなく中の値だけを印刷し、さらに悪いのはlocalStorageに印刷されたオブジェクトは「Object」しか得られず、配列オブジェクトに対してもオブジェクトと同じ結果を得ることができる.配列のような結果ではなく
次に、storageに格納する前に対応する値をJSON形式に変更し、出てからJSONを使用する方法を一時的に考えます.parseは値をオブジェクトに変更します.
 var obj1 = {
      name: 'a1',
      age: 1
  }
 var json_obj1 = JSON.stringify(obj1)
 window.localStorage.setItem('json_obj1', json_obj1)
 console.log(JSON.parse(window.localStorage.json_obj1));

ブール値、数字のような値については、JSONのような面倒な方法ではなく、得た後に彼らのタイプを変えることができますが、変数のタイプが分からない場合、私が今考えているのは彼らを対象にして、JSONの方法で回転すれば、変数のタイプは変わりません.
もし皆さんが良い方法があればコメントを歓迎して、もし間違いがあれば皆さんに指摘してもらいたいし、storageが持っているgetItemの方法を使えば正しいタイプを得ることができると思っている人は試してみてください.私は試したことがありますが、得たタイプも正しくありません.
web storageを少し紹介します
1、それはsessionStorageとlocalStorageを含んでcookieとsessionに似ているが、彼らのストレージ量は彼らよりずっと大きく、ローカルストレージメカニズムであり、HTTPにおけるcookieの役割に代わることはできないので、ローカルストレージとしてしか使えないところもある.2、storageはイベントも提供し、値がクリアまたは変更されるとトリガーされます.
 window.addEventListener('storage', function () {
      alert('storage    ')
  })

この方法は、1つの書き込みリスニングで、別のページが変更され、結果が得られます.ブラウザが1つのページだけ開いても反応しない場合は、現在のページをブラウザで1つ開くと、効果が得られます.深く勉強したい場合は、以下を参照してください.http://blog.csdn.net/ruangong1203/article/details/52841135