HTML的本地存储

我们在编写HTML的时候必然会有一些数据来存储，当我们没有数据库来存储时，我们就可以使用本地存储。本地存储有几种：localstorage，sessionstorage。sessionStorage 和 localStorage 的用法基本一致，引用类型的值要转换成JSON。下面我们讲解一下怎么使用。

 

 我们先说一下他们的一些参数

 

 

优缺点和特性：
sessionStorage（临时存储） ：为每一个数据源维持一个存储区域，在浏览器打开期间存在，包括页面重新加载
localStorage（长期存储） ：与 sessionStorage 一样，但是浏览器关闭后，数据依然会一直存在

 

我们对比来讲：

 

 

存储数据：    
    sessionStorage.setItem('key', JSON.stringify(info));
    localStorage.setItem('key', JSON.stringify(info));

 其中key是我们存储数据的名字，后面的参数是我们存储的数据

 

获取数据：    
    var data1 = JSON.parse(sessionStorage.getItem('key'));
    var data2 = JSON.parse(localStorage.getItem('key'));

我们可以定义一个变量名用于获取值

 

删除一个数据：

我们可以删除本地存储的一个数据 ：   
    sessionStorage.removeItem('key');
    localStorage.removeItem('key');

 

删除所有数据：

  sessionStorage.clear();
  localStorage.clear();

 

sessionStorage和localStorage提供的key()和length可以方便的实现存储的数据遍历，例如下面的代码

 

var storage = window.localStorage; 
for (var i=0, len = storage.length; i < len; i++)
{
var key = storage.key(i); 
var value = storage.getItem(key); 
console.log(key + "=" + value); 
}

 

这样我们就遍历了我们存储的数据