HTML5高级之Web存储（带示例）_html5web存储示例页面设置-优快云博客

本文介绍了HTML5引入的Web存储特性，包括localStorage和sessionStorage。localStorage用于长时间保存用户数据，而sessionStorage仅在当前浏览器窗口有效。文中详细讲解了它们的API使用，如setItem、getItem等，并提供了示例代码。此外，还提到了storage事件，当localStorage数据修改时，可在window上绑定该事件以实现多个窗口的数据同步更新。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Web存储

浏览器保存数据 cookie 和服务器的session

HTML5新增的web存储

--localStorage

特点：长时间保存用户数据

--sessionStorage

特点：浏览器当前窗口有效（如果浏览器当前窗口关闭，sessionStorage中的所有数据都会被清空）

API使用

方法：

----------setItem（key，value）

----------getItem（key）

----------removeItem（key）

----------clear（）

配合使用的属性：

length---------保存的数据的长度（个数）

配合使用的方法：

key（index）---------根据索引值返回此处的key值

sessionStorage使用代码示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/sessionStorage_1.js"></script>
</head>
<body>
    Key:<input id="key"><br>
    Val:<input id="val"><br>
    <input type="button" id="btnSave" value="Save">
    <input type="button" id="btnShow" value="Show">
</body>
</html>

///

/**
 * 根据id获取元素
 * @param id
 * @returns {HTMLElement | null}
 */
function $(id) {
    return document.getElementById(id);
}

//初始化
function init() {
    //获取元素
    var btnSave = $("btnSave");
    var btnShow = $("btnShow");
    //绑定事件
    btnSave.addEventListener("click",btnSave_click,false);
    btnShow.addEventListener("click",btnShow_click,false);

}

/**
 * 利用sessionStorage的方法setItem把key和val保存到sessionStorage里面去
 * @param e
 */
function btnSave_click(e){
    var key = $("key").value;
    var val = $("val").value;
    sessionStorage.setItem(key,val);
    alert("保存成功");
}

/**
 * 利用sessionStorage的方法getItem把key中的val取出来，在浏览器中弹窗
 * @param e
 */
function btnShow_click(e){
    var key = $("key").value;
    var val = sessionStorage.getItem(key);
    alert(val);
}
//页面加载完成才执行
window.addEventListener("load", init, false);

key（）和length的用法：

function btnShow_click(e){
    //var key = $("key").value;
    //var val = sessionStorage.getItem(key);
    //alert(val);
    for (var i=0;i<sessionStorage.length;i++){//获取sessionStorage的长度个数
        //用key方法找出所有的key值，并根据key值获取到val值，打印到控制台
        var val = sessionStorage.getItem(sessionStorage.key(i));
        console.log(val);
    }
}

共同特点：两者都可以将数据保存在本地浏览器中

storage事件

这个事件是localStorage的事件，而且是要在window上绑定使用

--只要其中一个窗口修改了localStorage里面的数据，利用storage事件可以通知其他窗口都做更新

///

/**
 * 根据id获取元素
 * @param id
 * @returns {HTMLElement | null}
 */
function $(id) {
    return document.getElementById(id);
}

//初始化
function init() {
    //获取元素
    var btnSave = $("btnSave");
    var btnShow = $("btnShow");
    //绑定事件
    btnSave.addEventListener("click",btnSave_click,false);
    btnShow.addEventListener("click",btnShow_click,false);

}

/**
 * 利用localStorage的方法setItem把key和val保存到localStorage里面去
 * @param e
 */
function btnSave_click(e){
    var key = $("key").value;
    var val = $("val").value;
    localStorage.setItem(key,val);
    alert("保存成功");
}

/**
 * 利用localStorage的方法getItem把key中的val取出来，在浏览器中弹窗
 * @param e
 */
function btnShow_click(e){
    //var key = $("key").value;
    //var val = localStorage.getItem(key);
    //alert(val);
    findAll();
}
//显示全部localStorage数据的方法
function findAll(){
    for (var i=0;i<localStorage.length;i++){//获取localStorage的长度个数
        //用key方法找出所有的key值，并根据key值获取到val值，打印到控制台
        var val = localStorage.getItem(localStorage.key(i));
        console.log(val);
    }
}
function localStorage_click(){
    findAll();
}
//页面加载完成才执行
window.addEventListener("load", init, false);
//绑定storage方法
window.addEventListener("storage",localStorage_click,false);