html5本地存储（web Storage）

来源：互联网发布：arp检测软件编辑：程序博客网时间：2024/05/17 00:54

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就介绍到这里，嘻嘻！

1 0