html5本地存储(web Storage)

原创 2015年11月20日 16:53:52

html5本地存储(web Storage)

Hi,和大家又见面了,如果你看过我的第一篇文章,一定知道我这一次要讲技术了,那么今天我们来聊聊h5本地存储,个人觉得这是h5很不错的一个功能;当我们在制作网页时会希望记录一些信息,例如用户登录状态,计数器或者小游戏等,但是有不希望用到数据库,就可以利用web Storage技术将数据存储在用户浏览器中。 
web Storage是一种将少量数据存储在客户端磁盘的技术。只要支持webStorageApi规格的浏览器,网页设计者都可以使用javaScript来操作它。
web Storage提供两种方式将数据保存在客户端:一种是**localStorage**,另一种是SessionStorage,两者主要差异在于生命周期和有效范围:
|web Storage类型    |    生命周期 | 有效范围|
|localStorage| 执行删除命令才会消失| 同一网站的网页可以跨窗口和分页 |
| sessionStorage  |浏览器窗口或分页(tab)关闭就会消失|  仅对当前浏览器或窗口或分页有效  |

个人比较喜欢用localStorage,因为它可以永久保存在客户端,很不错;
为了避免浏览器不支持web Storage功能,在操作之前,最好先检测浏览器是否支持这项功能,语法如下:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>webStorage的使用</title>
        <script>
            if(typeof(Storage)=="undefined"){
                alert("您的浏览器不支持web Storage哦!")
            }else{
                alert("支持哦!");
            }
            //localStorage和sessionStorage程序代码
        </script>
    </head>
    <body>

    </body>
</html>

—-接下来详细介绍localStorage的用法,逐一介绍3种访问localStorage的方法:

1. Storage对象的setItem和getItem方法
存储使用setItem方法,其格式如下:
window.localStorage.setItem(key,value);
如将用户名存储到localStorage中代码可以这样写:
localStorage.setItem(“userName”,”张三”)
当我们想读取userdata数据时,则使用getItem方法,格式如下:
localStorage.getItem(“userName”);
2. 数组索引
存储语法如下:
window.localStorage[“userName”]=”张三”;
读取语法如下:
var value=window.localStorage[“userName”];
3.属性
存储语法如下:
window.localStorage.userName=”张三”;
读取语法如下:
var value1=window.localStorage.userName;
一般情况下,用的比较多的是getItem和setItem;
介绍完访问localStorage的方法,下面我们来看看删除localStorage的方法:
要删除某一条localStorage数据,可以调用removeItem方法或者delete属性进行删除,例如:
window.localStorage.removeItem(“userName”);
delete window.localStorage.userName;
delete window.localStorage[“userName”]
要想删除localStorage全部数据,可以使用clear()方法
localstorage.clear();
下面以一个完整的例子来介绍:

<!DOCTYPE html>
<html>

    <head>
        <title>ch05_01</title>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
        <link rel=stylesheet type="text/css" href="color.css">
        <script type="text/javascript">
            function onLoad() {
                if (typeof(Storage) == "undefined") {
                    alert("Sorry!!你的浏览器不支持Web Storage");
                } else {
                    window.document.getElementById("btn_save").addEventListener("click", saveToLocalStorage);
                    window.document.getElementById("btn_load").addEventListener("click", loadFromLocalStorage);
                    window.document.getElementById("find").addEventListener("click", findFromLocalStorage);
                    window.document.getElementById("clear").addEventListener("click", clearFromLocalStorage);
                }
            }
            //存储到localStorage
            function saveToLocalStorage() {
                localStorage.setItem("userName", window.document.getElementById("inputname").value)
                localStorage.setItem("pwd", window.document.getElementById("password").value)
            }
            //从localStorage读取数据
            function loadFromLocalStorage() {
                var userName1 = localStorage.getItem("userName");
                var pwd1 = localStorage.getItem("pwd");
                window.document.getElementById("show_LocalStorage").innerHTML = userName1 + "&nbsp;&nbsp;&nbsp;" + pwd1;
            }
            //遍历键值的方法
            function findFromLocalStorage() {
                for (var i = localStorage.length - 1; i >= 0; i--) {
                    console.log('第' + (i + 1) + '条数据的键值为:' + localStorage.key(i) + ',数据为:' + localStorage.getItem(localStorage.key(i)));
                }
            }
            //清除localStorage中的数据
            function clearFromLocalStorage() {
                localStorage.clear();
                var userName1 = localStorage.getItem("userName");
                var pwd1 = localStorage.getItem("pwd");
                window.document.getElementById("show_LocalStorage").innerHTML = userName1 + "&nbsp;&nbsp;&nbsp;" + pwd1;
            }
        </script>
    </head>

    <body onload="onLoad()" style="text-align: center">
        <input type="text" id="inputname" style="border: none;border-bottom: 1px solid #CCCCCC;" value="" placeholder="请输入用户名">
        <br/>
        <input type="text" id="password" style="border: none;border-bottom: 1px solid #CCCCCC;" value="" placeholder="请输入密码">
        <div id="show_LocalStorage"></div>
        <button id="btn_save">存储到localStorage</button>
        <br/>
        <button id="btn_load">从localStorage读取数据</button>
        <br/>
        <button id="find">遍历key键值的方法</button>
        <br/>
        <button id="clear">清除localStorage数据</button>
    </body>
</html>

接下来访问sessionStorage

sessionStorage只能保存在单一的浏览器窗口或分页(tab),关闭浏览器后存储的数据就消失了,其最大的用途在于保存一些临时的数据,防止用户重新整理网页时不小心丢失这些数据。sessionStorage的操作方法与localStorage相同;因此,懒懒的我就不解释了哈,相信聪明的你一定懂得;
关于webStorage就介绍到这里,嘻嘻!

HTML5本地存储之Web Storage篇

Web Storage是HTML5引入的一个非常重要的功能,在前端开发中经常用到,可以在客户端本地存储数据,类似HTML4的cookie,但可实现功能要比cookie强大的多,cookie大小被限制在...
  • shenzhenNBA
  • shenzhenNBA
  • 2013年01月08日 14:27
  • 13706

HTML5实战与剖析之Web存储机制(Web Storage)

Web Storage是以Key-Value的形式进行数据持久性存储。Web Storage是为了克服由cookie带来的一些限制而产生的。当数据需要被严格控制在客户端上的时候,无须持续地将数据发回服...
  • LiMengXiaoLong
  • LiMengXiaoLong
  • 2014年08月27日 19:59
  • 1515

HTML5本地存储之Web Storage篇

Web Storage是HTML5引入的一个非常重要的功能,可以在客户端本地存储数据,类似HTML4的cookie,但可实现功能要比cookie强大的多,cookie大小被限制在4KB,Web Sto...
  • hbcui1984
  • hbcui1984
  • 2013年01月05日 00:41
  • 27501

【HTML5与CSS3基础】HTML5本地存储 Web Storage

概述本地存储Web Storage实际上是HTML4的Cookies存储机制的一个改进版本。它的作用是在网站中把有用的信息存储到本地的计算机或移动设备上,然后根据需要从本地读取信息。Web Stora...
  • zgljl2012
  • zgljl2012
  • 2015年04月05日 15:32
  • 1321

HTML5本地存储之Web Storage篇

Web Storage是HTML5引入的一个非常重要的功能,可以在客户端本地存储数据,类似HTML4的cookie,但可实现功能要比cookie强大的多,cookie大小被限制在4KB,Web Sto...
  • vinifoxmailcom
  • vinifoxmailcom
  • 2015年09月24日 15:09
  • 233

HTML5本地存储之Web Storage篇

Web Storage是HTML5引入的一个非常重要的功能,在前端开发中经常用到,可以在客户端本地存储数据,类似HTML4的cookie,但可实现功能要比cookie强大的多,cookie大小被限制在...
  • pangchengyong0724
  • pangchengyong0724
  • 2016年07月25日 10:38
  • 226

HTML5本地存储之Web Storage篇

HTML5本地存储之Web Storage篇 --> 姓名: 手机: ...
  • boyit0
  • boyit0
  • 2014年12月06日 16:23
  • 402

(五)HTML5本地存储——Web Storage

一、sessionStorage与localStorage 二、为什么选择Web Storage而不是Cookie? 三、Web Storage缺陷与不足 四、sessionStorage与local...
  • lmb55
  • lmb55
  • 2015年07月02日 11:08
  • 953

HTML5本地存储之Web Storage篇

Web Storage是HTML5引入的一个非常重要的功能,可以在客户端本地存储数据,类似HTML4的cookie,但可实现功能要比cookie强大的多,cookie大小被限制在4KB,Web S...
  • gebitan505
  • gebitan505
  • 2017年02月13日 10:34
  • 256

HTML5本地存储之Web Storage篇

Web Storage是HTML5引入的一个非常重要的功能,可以在客户端本地存储数据,类似HTML4的cookie,但可实现功能要比cookie强大的多,cookie大小被限制在4KB,Web Sto...
  • a714115852
  • a714115852
  • 2014年03月24日 15:58
  • 612
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:html5本地存储(web Storage)
举报原因:
原因补充:

(最多只允许输入30个字)