html5-Local Storage 本地存储

最新推荐文章于 2024-07-18 15:09:36 发布

empty007

最新推荐文章于 2024-07-18 15:09:36 发布

阅读量177

点赞数

分类专栏： web前端文章标签： html5 本地存储

本文链接：https://blog.csdn.net/empty007/article/details/84382498

版权

web前端专栏收录该内容

10 篇文章 0 订阅

订阅专栏

转载自【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>

empty007

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
html5-Local Storage 本地存储

转载自【http://www.656463.com/article/339】1、HTML 本地存储介绍本地存储相当于一个超大型的Cookie，可以通过浏览器存储相关数据[img]http://pic.yupoo.com/naxsu_v/CyYRC6Uo/lfBTO.gif[/img]2、HTML5localStorage 操作使用在HTML5中，本地存储是一个windo...
复制链接

扫一扫

专栏目录