HTML5 localStorage与sessionStorage存储详解
本文详解HTML5提供的两种本地存储机制:localStorage与sessionStorage。对比两者在数据生命周期、容量限制(5MB)及同域策略上的差异,介绍基于Key-Value的读写操作方法,并深入解析storage事件在跨页面通信中的应用及IE浏览器的特殊行为。
HTML5本地存储背景
背景
在早期的Web开发中,JavaScript主要依赖Session和Cookie来存储用户信息。直到与同事交流后,我才了解到HTML5引入了localStorage本地存储方案,使得在浏览器端持久化存储数据成为可能。
早期的Cookie容量极小,仅约4KB,且存在安全隐患。在IE6时代,每个域名最多只能存储20个Cookie,限制较多。虽然当时IE支持userData对象,Flash也提供了约Cookie 25倍大小的Storage,但随着Flash的淘汰,这些方案已不再适用。
进入HTML5时代,LocalStorage成为统一标准。官方建议每个网站的存储上限为5MB,尽管不同浏览器设置略有差异,但对于存储JSON数据、字符串或进行常规缓存而言,这一空间已绰绰有余。
localStorage与sessionStorage对比
HTML5 LocalStorage 本地存储
- sessionStorage:保存的数据仅用于浏览器的一次会话,当会话结束(通常表现为窗口关闭)时,数据会被清空;
- localStorage:保存的数据长期存在,下次访问该网站时,网页可直接读取之前保存的数据。除保存期限不同外,这两个对象的属性和方法完全一致。
它们可视为Cookie机制的增强版,提供了更大的存储空间。但与Cookie类似,它们同样受同域策略限制:只有同源下的网页才能读取存入的数据。
通过检测window对象是否包含sessionStorage和localStorage属性,可以判断浏览器是否支持这两个对象。
function checkStorageSupport()
{
// sessionStorage
if (window.sessionStorage) {
return true;
} else {
return false;
}
// localStorage
if (window.localStorage) {
return true;
} else {
return false;
}
}
Storage API操作方法
Storage 操作
sessionStorage和localStorage存储的数据均以“Key-Value键值对”形式存在,即每项数据拥有键名和对应的值。所有数据均以文本格式保存。
//sessionStorage 操作
sessionStorage.setItem("key","value"); // setItem方法,存储变量名为key,值为value的变量
var valueSession = sessionStorage.getItem("key"); // getItem方法,读取存储变量名为key的值
sessionStorage.removeItem('key'); // removeItem方法,删除变量名为key的存储变量
sessionStorage.clear(); // clear方法,清除所有保存数据
//localStorage 操作
localStorage.setItem("key","value"); // 存储变量名为key,值为value的变量
localStorage.key = "value" // 同setItem方法,存储数据
var valueLocal = localStorage.getItem("key"); // 读取存储变量名为key的值
var valueLocal = localStorage.key; // 同getItem,读取数据
localStorage.removeItem('key'); // removeItem方法,删除变量名为key的存储变量
localStorage.clear(); // clear方法,清除所有保存的数据
// 利用length属性和key方法,遍历所有的数据
for(var i = 0; i < localStorage.length; i++)
{
console.log(localStorage.key(i));
}
// 存储 localStorage 数据为 Json 格式
value = JSON.stringify(jsonValue); // 将 JSON 对象 jsonValue 转化成字符串
localStorage.setItem("key", value); // 用 localStorage 保存转化好的的字符串
// 读取 localStorage 中 Json 格式数据
var value = localStorage.getItem("key"); // 取回 value 变量
jsonValue = JSON.parse(value); // 把字符串转换成 JSON 对象
Storage事件与跨页面通信
Storage 事件
当存储的数据发生变化时,会触发storage事件。我们可以为此事件指定回调函数以处理相关逻辑。
window.addEventListener("storage",onStorageChange);
回调函数接收一个event对象作为参数。该event对象的key属性保存了发生变化的键名。
function onStorageChange(e)
{
console.log(e.key);
}
除了key属性外,event对象还包含以下三个属性:
- oldValue:更新前的值。若该键为新增加,则此属性为null。
- newValue:更新后的值。若该键被删除,则此属性为null。
- url:原始触发storage事件的那个网页的网址。
!!! 特别需要注意的是,该事件不会在导致数据变化的当前页面触发。若浏览器同时打开了同一域名下的多个页面,当其中一个页面修改sessionStorage或localStorage数据时,其他所有页面的storage事件会被触发,而原始页面不触发。利用此机制可实现多窗口间通信。在所有浏览器中,仅IE浏览器例外,它会在所有页面触发storage事件。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持本站。
免登录快速分享代码:适合面试协作的轻量级JS在线运行工具推荐
2026-11-05 14:45:59
JS空字符串和纯空格转浮点数的结果是什么
2026-11-05 11:04:42
JS在线格式化缩进混乱怎么办?配置项调整技巧
2026-11-04 23:27:25
JS怎么获取秒级时间戳
2026-11-03 21:45:29
JS时间戳怎么从毫秒转换为秒
2026-11-03 20:04:14
