Web 存储

Web Storage的目的是克服由cookie带来的一些限制，当数据需要被严格控制在客户端上时，无须持续地将数据发回服务器。Web Storage的两个主要目标是：提供一种在cookie之外存储会话数据的途径以及提供一种存储大量可以跨会话存在的数据的机制

 

Web Storage分成两类：sessionStorage和localStorage。sessionStorage保存的数据用于浏览器的一次会话，当会话结束(通常是该窗口关闭)，数据被清空；localStorage保存的数据长期存在，下一次访问该网站的时候，网页可以直接读取以前保存的数据。除了保存期限的长短不同，这两个对象的属性和方法完全一样

由此我们知道

sessionStorage保存数据的话关闭浏览器后数据自动清空

localStorage 必须手动清除数据，当然时间长了浏览器自己也会清除数据

 

sessionstorage ["key"]="value"// 存储一个数据

var a = sessionstorage ["key"] //读取一个数据

sessionstorage .length  //获取数据的个数

sessionstorage .setItme("key","value")  //存储一个数据

sessionstorage .getItme("key") //读取一个数据

sessionstorage .removeItem(“key”）//删除指定数据

sessionstorage .clear()//清除所有的数据

 

查看浏览器里保存的数据。

 

 

记住这两个对象的属性和方法完全一样所以我们现在用localStorage来个小案例

<body>
    <div class="div">
        <h1>单词录入</h1>
        <div class="div1">
            英文: <input type="text" id="a">
            <br>
            <br> 中文:
            <input type="text" id="b">
        </div>
        <a class="a1">保存</a>
        <a class="a2">开始测试</a>
    </div>
    <script>
　　　　　　//获取按钮
        var a1 = document.getElementsByClassName("a1")[0];
        var a2 = document.getElementsByClassName("a2")[0];
        var i = 0;
　　　　　　//开始保存数据
        a1.onclick = function() {
            i++
　　　　　　　　//获取input里的value值
            var a = document.getElementById("a").value;
            var b = document.getElementById("b").value;
　　　　　　　　
　　　　　　　　//在存储到浏览器当中
            localStorage["英文" + i] = a;
            localStorage["中文" + i] = b;
        }
　　　　　　//跳转到页面二
        a2.onclick = function() {
            location.href = "2.html";
        }
    </script>
</body>
<body>
    <div class="div">
        <h1>单词测试</h1>
        <div class="div1">

        </div>
        <a class="a2">提交答案</a>
        <a class="a1">继续录入</a>
    </div>
    <script>
        var div1 = document.getElementsByClassName("div1")[0];
        var a1 = document.getElementsByClassName("a1")[0];
        var a2 = document.getElementsByClassName("a2")[0];
        var length = sessionStorage.length; //获取数据长度
        //创建两个数组来存放中文和英文
        var num = [],
            num1 = [];

        for (var j = 1; j <= length / 2; j++) {
            //将中文放入num数组中
            num.push(sessionStorage["中文" + j]);
            console.log(num);
            //将英文放入num1数组中
            num1.push(sessionStorage["英文" + j]);
            //循环生成samp标签 input标签
            div1.innerHTML += "<samp></samp><br><input type=\"text\"><br>"
                //循环获取到生成的samp标签
            var samp = document.getElementsByTagName("samp");
            //循环给samp标签里添加数据数组里中文
            samp[j - 1].innerHTML += num[j - 1];
        }


        a1.onclick = function() {
            location.href = "1.html"
        }

        a2.onclick = function() {
            for (var i = 0; i < length / 2; i++) {
                var input = document.getElementsByTagName("input");
                if (input[i].value == num[i]) {
                    sessionStorage["分数"] = i + 1;
                }
                console.log(input[i].value);
            }

            location.href = "3.html"
        }
        console.log(samp)
        console.log(num)
        console.log(num1)
    </script>
</body>
posted @ 2020-01-14 15:37  石舟丿  阅读(128)  评论(0)    收藏  举报