html5-Local Storage 本地存储

最新推荐文章于 2025-11-24 09:30:00 发布

原创最新推荐文章于 2025-11-24 09:30:00 发布 · 234 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#html5 #本地存储

web前端专栏收录该内容

10 篇文章

订阅专栏

转载自【http://www.656463.com/article/339】

1、HTML 本地存储介绍
本地存储相当于一个超大型的Cookie，可以通过浏览器存储相关数据
[img]http://pic.yupoo.com/naxsu_v/CyYRC6Uo/lfBTO.gif[/img]
2、HTML5localStorage 操作使用
在HTML5中，本地存储是一个window的属性，包括localStorage和 sessionStorage，从名字应该可以很清楚的辨认二者的区别，前者是一直存在本地的，后者只是伴随着session，窗口一旦关闭就没了。二者用法完全相同。

if (window.localStorage) {
alert('浏览器支持！');
} else {
alert('不支持！');
}

三种设置本地存储的方法

localStorage.t1 = "www.656463.com";
localStorage["t2"] = "HTML5";
localStorage.setItem("t3","领悟书生");

三种访问本地存储的方法

localStorage.t1;
localStorage["t2"];
localStorage.getItem("t3");

其他扩展

localStorage.removeItem();//清除
localStorage.clear() //清除所有
localStorage.length //获得多少键
localStorage.key()//获得存储的键内容

3、示例


<!DOCTYPE html>
<head>
<meta charset=gbk>
<title>HTML5 Local Storage 本地存储</title>
</head>

<body>
<script type="text/javascript">
    /*if (window.localStorage) {
    alert('浏览器支持！');
    } else {
    alert('不支持！');
    }*/

    //设置本地存储
    localStorage.t1 = "www.656463.com"; 
    localStorage["t2"] = "HTML5";
    localStorage.setItem("t3","领悟书生");

    //访问本地存储
    for(var i = 0;i<localStorage.length;i++){
    document.write(localStorage.key(i)+"-->"+
                localStorage.getItem(localStorage.key(i))+"<br>")
    }
    localStorage.removeItem("t1");
    localStorage.clear();
</script>
</body>
</html>