您的位置：首页 > 其它

sessionStorage与localStorage

2016-07-14 09:36 225 查看

Web Storage功能就是在Web上储存数据的功能，这里的储存是针对客户端本地而言的。具体分两种：sessionStorage和localStorage。

sessionStorage：将数据保存在session对象中。session是指用户在浏览某个网站时，从进入网站到浏览器关闭所经过的这段时间，也就是用户浏览这个网站所花费的时间。session对象可以用来保存在这段时间内所要求保存的任何数据。localStorage：将数据保存在客户端本地的硬件设备（硬盘）中，即使浏览器被关闭了，该数据仍然存在，下一次打开浏览器访问网站时仍然可以继续使用。

将Web Storage作为简易数据库，如果能解决数据检索，对列进行管理，就可以将Web Storage作为数据库来利用了。

sessionStorage的使用：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script>
function saveStorage(id){
var target = document.getElementById(id);
var str = target.value;
//保存数据的方法
sessionStorage.setItem("message",str);
}
function loadStorage(id){
var target = document.getElementById(id);
// 读取数据
var msg = sessionStorage.getItem("message");
target.innerHTML = msg;
}
</script>
</head>
<body>
<p id="msg"></p>
<p><input type="text" name="" id="input"></p>
<p><input type="button"  value="保存数据" onclick="saveStorage('input')"></p>
<p><input  type="button"  value="读取数据" onclick="loadStorage('msg')"></p>
</body>
</html>

localStorage的使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script>
        function saveStorage(id){
          var target = document.getElementById(id);
          var str = target.value;
        //保存数据的方法
            localStorage.setItem("message",str);
        }
   function loadStorage(id){
    var target = document.getElementById(id);
    // 读取数据
    var msg = localStorage.getItem("message");
    target.innerHTML = msg;
   }
</script>
</head>
<body>
<p id="msg"></p>
    <p><input type="text" name="" id="input"></p>
    <p><input type="button"  value="保存数据" onclick="saveStorage('input')"></p>
    <p><input  type="button"  value="读取数据" onclick="loadStorage('msg')"></p>
</body>
</html>

localStorage的保存，查询，清除使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script>
       function saveStorage2(id){
        var data = document.getElementById(id).value;
        var time = new Date().getTime();
        localStorage.setItem(time,data);
        alert("数据已存储");
        loadStorage2("msg2");
   }
   function loadStorage2(id){
        var result = "<table border = '1'>";
        for(var i = 0;i<localStorage.length;i++){
        var key = localStorage.key(i);
        var value = localStorage.getItem(key);
        var date = new Date();
        date.setTime(key);
        result += "<tr><td>"+value+"</td><td>"+date+"</td></tr>";
        }
        result += "</table>";
        var target = document.getElementById(id);
        target.innerHTML = result;
   }
   function clearStorage2(){
        localStorage.clear();
        alert("数据已经删除");
        loadStorage2("msg2");
   }
        function saveStorage3(){
            var data = new Object;
            data.name = document.getElementById("name").value;
            data.emial = document.getElementById("emial").value;
            data.tel = document.getElementById("tel").value;
            data.memo3 = document.getElementById("memo3").value;
           var str = JSON.stringify(data);
   //         stringify用于从一个对象解析出字符串，例如
    // var a={a:1,b:2}
    // 经 JSON.stringify(a)得到：
    // “{“a”:1,"b":2}”
           localStorage.setItem(data.name,str);
           alert ("已经保存数据"); 

        }
        function findStorage(id){
            var find = document.getElementById("find").value;
            var str = localStorage.getItem(find);
            var data = JSON.parse(str);
    // .parse 用于从一个字符串中解析出json 对象。例如
    // var str='{"name":"cpf","age":"23"}'
    // 经 JSON.parse(str) 得到：
    // Object: age:"23"
    //name:"cpf"

    //  _proto_:Object
            var result = "姓名" + data.name +"<br/>";
            result += "邮箱" + data.emial +"<br/>";
            result += "联系方式" + data.tel +"<br/>";
           result += "备注" + data.memo3 +"<br/>";
           var target = document.getElementById(id);
           target.innerHTML = result;
        }
</script>
</head>
<body>
<textarea id="memo" cols="60" rows="10"></textarea><br/>
<span style="white-space:pre">  </span><input type="button" name="" value="追加数据" onclick="saveStorage2('memo')">
<span style="white-space:pre">  </span><input type="button" value="删除数据" name="" onclick="clearStorage2()"><br/>
    <table>
        <tr>
            <td>姓名：</td>
            <td><input type="text" id="name"></td>
        </tr>
        <tr>
            <td>email：</td>
            <td><input type="emial" id="emial"></td>
        </tr>
        <tr>
            <td>电话号码：</td>
            <td><input type="text" id="tel"></td>
        </tr>
        <tr>
            <td>备注：</td>
            <td><input type="text" id="memo3"></td>
        </tr>
        <tr>
            <td></td>
            <td><input type="button" value="保存" onclick="saveStorage3()"></td>
        </tr>
    </table>
    <hr>
    <p>检索：
        <input type="text" id="find">
        <input type="button" value="检索" onclick="findStorage('msg3')">
    </p>
    <p id="msg3"></p>
</body>
</html>

参考文献：HTML5 localStorage and sessionStorage

HTMl5的sessionStorage和localStorage

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航