localStorage是HTML5中作为在客户端耐久保留数据的计划,与cookie比拟,localStorage不用在客户端与服务器之间互相通报,且可存储大批数据(2.5MB-5MB),所以应用局限更普遍。
因为许多老式浏览器不支撑localStorage,所以要先写个函数推断浏览器是不是支撑该对象。
function supportLocalStorage() {
if (typeof localStorage === 'object') {
return true;
}
return false;
}
假如运转该函数,返回值为true,那末祝贺你,能够应用当地存储了。
localStorage有两个要领用于读取和存储数据,另有一个要领用于删除数据。
localStorage.setItem('name', 'Shane'); // 存储数据
localStorage.getItem('name'); // 读取数据,返回Shane
localStorage.clear(); // 清空当前域下的一切localStorage
不过这两个要领在现实应用中很少用到,我们平常都是直接采纳直接接见属性的要领来读取和设置。
localStorage.name = 'Shane'; // 存储数据
localStorage.name // 读取数据,返回Shane
为了轻易明白,我简朴的写一个关于localStorage的demo供人人参考
一个span显现数字,一个按钮,点击按钮使数字转变,并存储到localstorage中。
<p id="demo">
<span id="num"></span>
<button id="btn">click me!</button>
</p>
function Demo(id) {
this.counter = 0;
this.mainEl = document.querySelector(id);
this.numEl = this.mainEl.querySelector('#num');
this.btnEl = this.mainEl.querySelector('#btn');
this.btnEl.addEventListener('click', this.changeCounter.bind(this)); // bind限制作用域
this.init();
}
Demo.prototype.init = function () {
/* 若localStorage中counter不存在则为0,存在则读取 */
if (localStorage.__counter__ != null) {
this.counter = localStorage.__counter__;
} else {
localStorage.__counter__ = this.counter;
}
this.numEl.innerHTML = this.counter;
}
Demo.prototype.changeCounter = function () {
this.counter++;
localStorage.__counter__ = this.counter;
this.numEl.innerHTML = this.counter;
}
var demo = new Demo('#demo');
当初次运转页面时,经由过程开辟工具能够看到localstorage中有一个counter被设置为了0。
当点击时,不仅页面中数字发生了变化,localStorage对象中的属性也发生了变化。
这就是localStorage的简朴应用,其实在一样平常开辟中另有许多应用,比方离线购物车。