sessionStorage和localStorage使用时的注意事项

先说一下我写这篇最想记录的，然后在跟写一下他们的基本用法。

注意事项

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，但他们的存储量较他们大了很多，是一种本地存储机制，并不能代替cookie在HTTP中的作用，所以有的地方还是要用cookie的，要是只作为本地存储东西可以用。
2、storage 还提供了事件，当值清空或者改变时会触发。

 window.addEventListener('storage', function () {
      alert('storage 改变了')
  })

这个方法是在一个写监听，另一个页面改变，然后会有结果，如果浏览器只开一个页面没有反应，你可以将当前页面再在浏览器打开一个，就能看到效果了
如果想深入学习请看下：http://blog.csdn.net/ruangong1203/article/details/52841135