Rumah > hujung hadapan web > Tutorial H5 > HTML5本地存储之localStorage、sessionStorage的具体分析

HTML5本地存储之localStorage、sessionStorage的具体分析

黄舟
Lepaskan: 2017-03-30 13:15:00
asal
1776 orang telah melayarinya

1、概述

localStorage和sessionStorage统称为Web Storage,它使得网页可以在浏览器端储存数据。

sessionStorage保存的数据用于浏览器的一次会话,当会话结束(通常是该窗口关闭),数据被清空;localStorage保存的数据长期存在,下一次访问该网站的时候,网页可以直接读取以前保存的数据。除了保存期限的长短不同,这两个对象属性和方法完全一样。

它们很像cookie机制的强化版,能够动用大得多的存储空间。目前,每个域名的存储上限视浏览器而定,Chrome是2.5MB,Firefox和Opera是5MB,IE是10MB。其中,Firefox的存储存空间由一级域名决定,而其他浏览器没有这个限制。也就是说,在Firefox中,a.example.com和b.example共享5MB的存储空间。另外,与cookie一样,它们也受同域限制。某个网页存入的数据,只有同域下的网页才能读取。

通过检查window对象是否包含sessionStorage和localStorage属性,可以确定浏览器是否支持这两个对象。

function checkStorageSupport() {    
var result = {};    
//sessionStorage
    if (window.sessionStorage) {
        result.sessionStorage = true;
    } else {
        result.sessionStorage = false;
    }    //localStorage
    if (window.localStorage) {
        result.localStorage = true;
    } else {
        result.localStorage = false;
    }    return result;

}
Salin selepas log masuk

2、操作方法

2.1 存入/读取数据

sessionStorage和localStorage保存的数据,都以“键值对”的形式存在。也就是说,每一项数据都有一个键名和对应的值。所有的数据都是以文本格式保存。

存入数据用setItem方法。它接受两个参数,第一个是键名,第二个是保存的数据。

sessionStorage.setItem('key', 'value');

localStorage.setTime('key', 'value');
Salin selepas log masuk

读取数据使用getItem方法。它只有一个参数,就是键名。

var valueSession = sessionStorage.getItem('key');var valueLocal = localStorage.getItem('key');
Salin selepas log masuk

2.2 清除数据

removeItem方法用于清除某个键名对应的数据。

sessionStorage.removeItem('key');

localStorage.removeItem('key');
Salin selepas log masuk

clear方法用于清除所有保存的数据。

sessionStorage.clear();

localStorage.clear();
Salin selepas log masuk

2.3 遍历操作

利用length属性和key方法,可以遍历所有的键。

for (var i = 0; i < localStorage.length; i++) {
    console.log(localStorage.key(i));
}
Salin selepas log masuk

其中的key方法,根据位置(从0开始)获得键值。

localStorage.key(1);
Salin selepas log masuk

3、storage事件

当储存的数据发生变化时,会触发storage事件。我们可以指定这个事件的回调函数

window.addEventListener(&#39;storage&#39;, onStorageChange);
Salin selepas log masuk

回调函数接受一个event对象作为参数。这个event对象的key属性,保存发生变化的键名。

function onStorageChange(e) {
    console.log(e.key);
}
Salin selepas log masuk

除了key属性,event对象的属性还有三个:

oldValue:更新前的值。如果该键为新增加,则这个属性为null。

newValue:更新后的值。如果该键被删除,则这个属性为null。

url:原始触发storage事件的那个网页的网址。

值得特别注意的是,该事件不在导致数据变化的当前页面触发。如果浏览器同时打开一个域名下面的多个页面,当其中一个页面改变sessionStorage或localStorage的数据时,其他所有页面的storage事件会被触发,而原始页面并不触发storage事件。可以通过这种机制,实现多个窗口之间的通信。所有浏览器之中,只有IE浏览器除外,它会在所有页面触发storage事件。

Atas ialah kandungan terperinci HTML5本地存储之localStorage、sessionStorage的具体分析. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan