我们在编写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); }
这样我们就遍历了我们存储的数据