localStorage与Storage

背景

先前对于本地存储中的localStorage和sessionStorage的了解仅限于它的使用方法及两者之期间的区别，今天看了一篇关于localStorage的其他的知识点，看完记录一下，加深印象。

localStorage与Storage的关系

• Storage是只读的，它是localStorage的原型，也就是说localStorage是Storage的一个实例对象

console.log(localStorage)
//输出结果如下：
Storage {length: 0}
length: 0
__proto__: Storage

• localStorage的方法
  #信息的存入与读取：

  localStorage.setItem();           // 存入数据
  localStorage.getItem();           // 读取数据
  localStorage.removeItem();    // 清除指定的数据
  localStorage.clear();               // 清除所有数据
  

  #设置和访问属性
  和普通的实例对象设置和访问属性是一样

  localStorage['test'] = 'cat'    //等价于： localStorage.test= 'cat'       
  console.log( localStorage.test)    //cat
  

  #检查localStorage中存储的数据里是否存某个值

  localStorage.hasOwnProperty()
  //eg:
  localStorage.hasOwnProperty('test')    //true
  

  #查看localStorage中存储数据的所有键名

  Object.keys(localStorage)
  

  #将JSON存储到localStorage中
  localStorage只能储存字符串，当存储的数据是数据后对象类型时，就需要将其转换成JSON的格式

     var info = [
             {
               pname: 'xiaoming',
               age: 2
             },
             {
               pname: 'lisi',
               age: 12
             }
           ]
           //将数据存入本地中
           let infoStr = JSON.stringify(info);     // 将数据转换成字符串格式
           localStorage.setItem('info',infoStr);
           console.log(infoStr);
   	//读取本地中的数据
           let valstr = localStorage.getItem('info');
           let val = JSON.parse(valstr);       //将数据转换成对象格式
           console.log(val);
  

• sessionStorage与localStorage一样，都是Storage的实例对象，存储和读取方法都一样，区别在于localStorage是永久存储，而sessionStorage的存储时间是有期限的，浏览器关闭后，sessionStorage存储的信息就会被清除。
  但是也可以为localStorage设置过期时间：
  自行设置一个过期时间，将数据存入市的时间记录下来，然后用读取数据时时间减去存入时的时间，将这段时间差与有效时间进行比对，从而来决定输出的结果。

	function setStorage(key,value) {
       var curTime = new Date().getTime();
       localStorage.setItem(key,JSON.stringify({val:value,time:curTime}))
     }
     function getStorage(key,exp) {
       var val = localStorage.getItem(key);
       obj = JSON.parse(val);
       console.log((new Date().getTime()-obj.time))
       if(new Date().getTime()-obj.time>exp){
         console.log('过期啦。取不到啦')
       }else{
         console.log(obj.val)
       }
     }
     // setStorage('test',3);
     getStorage('test',360000000)