Web Storage的使用

今天学习Web Storage的使用，里面包含两种存储方式一个localStorage它是一种长期储存在浏览器中，浏览器关闭不会清除，除非手动删除才会消失，一种是sessionStorage是在浏览器关闭后就会一起删除，不会继续在浏览器中保存，localStorage的大小最多是5M，而sessionStorage大小最多是20M。

在使用Web Storage要先检测一下浏览器是否支持Web Storage，可以手动检测，打开F12在里面寻找Application（程序），如果有就表示可以使用，如果没有就说明不支持，要升级浏览器，也可以使用代码来检测，代码如下：

if (typeof("Storage") !== "undefined") {
           document.write("你的浏览器支持")
        } else {
            // 输出到网页上
            document.getElementById("result").innerHTML = "你的浏览器不支持";
        }

一运行就会显示对应的效果。

那么如何使用localStorage呢？

        

<div id="result"></div>
    <script>
        if (typeof("Storage") !== "undefined") {
            // 第一种
            localStorage.setItem("stu", "姓名");
            document.getElementById("result").innerHTML = localStorage.getItem("stu")
            localStorage.removeItem("stu");
            // 第二种记录方式
            localStorage.st = "2002";
            document.getElementById("result").innerHTML = localStorage.getItem("stu") + localStorage.getItem("st")
                // document.getElementById("result").innerHTML = 
        } else {
            // 输出到网页上
            document.getElementById("result").innerHTML = "你的浏览器不支持";
        }
    </script>

 像这样就添加到浏览器端了，浏览器就保存起来了.

制作一个点击点击事件：

   <input type="button" value="点击" onclick="fn()">
    <div id="result"></div>
  

<script type="text/javascript">
        function fn() {
            if (sessionStorage.click_num) {
                sessionStorage.click_num = parseInt(sessionStorage.click_num) + 1
            } else {
                sessionStorage.click_num = 1;
            }
            document.getElementById("result").innerHTML = "点击次数" + sessionStorage.click_num;
        }
    </script>

 效果是这样的，每次打开页面里面的数字并不会消失，而会继续叠加，直到手动删除，否则就会每点一下，就增加一个，在localStorage和sessionStorage里面的属性有

 这些方法在locaStorage和sessionStorage里面的用法一样，然后就可以根据这些项目写一个小项目：

  <div>
        网站名：<input type="text" placeholder="请输入网站名" id="ipt1"><br> 网址：
        <input type="text" placeholder="请输入网址" id="ipt2"><br>
        <input type="submit" name="" onclick="fn()" value="提交">
    </div>
    <div id="sa">
        <table border="1px soild red" width="200px" style=" text-align: center ">
        </table>
    </div>
    <div>
        <input type="text" placeholder="请输入要搜索的内容" id="search">
        <input type="button" value="搜索" onclick="serach()">
        <div id="result"></div>
    </div>

<script type="text/javascript">
        window.onload = loadAll();
        // 添加
        function fn() {
            // 获取到输入框里的内容
            var inpt = document.getElementById("ipt1").value;
            var ipt = document.getElementById("ipt2").value;
            localStorage.setItem(inpt, ipt);
            alert("添加成功");
        }
        // 内容全部显示
        function loadAll() {
            var result = "<table>"
            result += "<tr><th>网站名</th><th>网址</th></tr>"
                // 使用循环得到每一个item
            for (var i = 0; i < localStorage.length; i++) {
                // localStorage.key(i) + "" + localStorage.getItem(localStorage.key(i));
                var key = localStorage.key(i); //根据索引i的值从key列表中获取其中一个键
                var value = localStorage.getItem(key); //根据键名获取键值
                result += "<tr> <td>" + key + "</td> <td>" + value + "</td> </tr>"
            }
            result += "</table>"
                // 将内容渲染到页面
            document.getElementById("sa").innerHTML = result;
        }
        // 查找
        function serach() {
            var sou = document.getElementById("search").value;
            document.getElementById("result").innerHTML = "网站名" + sou + "网站地址" + localStorage.getItem(sou);
        }
    </script>

这就可以手动添加内容，然后在上面显示出来