html5 WEB缓存-优快云博客

本文链接：https://blog.youkuaiyun.com/fxss5201/article/details/52426619

HTML5 提供了两种在客户端存储数据的新方法：
1、localStorage - 没有时间限制的数据存储
2、sessionStorage - 针对一个 session 的数据存储
之前，这些都是由 cookie 完成的。但是 cookie 不适合大量数据的存储，因为它们由每个对服务器的请求来传递，这使得 cookie 速度很慢而且效率也不高。
在 HTML5 中，数据不是由每个服务器请求传递的，而是只有在请求时使用数据。它使在不影响网站性能的情况下存储大量数据成为可能。
对于不同的网站，数据存储于不同的区域，并且一个网站只能访问其自身的数据。
HTML5 使用 JavaScript 来存储和访问数据。
localStorage 方法：
localStorage 方法存储的数据没有时间限制。第二天、第二周或下一年之后，数据依然可用。
简单的localStorage API：
保存数据：localStorage.setItem(key,value);
localStorage.key = value;
读取数据：localStorage.getItem(key);
localStorage.key
删除单个数据：localStorage.removeItem(key);
删除所有数据：localStorage.clear();
sessionStorage 方法
sessionStorage 方法针对一个 session 进行数据存储。当用户关闭浏览器窗口后，数据会被删除。
简单的sessionStorage API：
保存数据：sessionStorage.setItem(key,value);
sessionStorage.key = value;
读取数据：sessionStorage.getItem(key);
sessionStorage.key
删除单个数据：sessionStorage.removeItem(key);
删除所有数据：sessionStorage.clear();
下面是使用localStorage 方法写的一个相当于通讯录的demo，由于如果每个人都占用一个localStorage 的会造成大量的浪费，所以采用将所有数据保存到一个localStorage 的方法。
点击此处可进行动态测试：点击测试

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>phoneList</title>
    <!-- [if lt IE 9]>
    <script src="js/json2.js"></script>
    <![endif]-->
    <link rel="stylesheet" type="text/css" href="css/style.css">
    <link rel="stylesheet" type="text/css" href="css/reset.css">
    <script src="js/jquery-1.11.3.js"></script>
</head>
<body>
<div class="wrapper">
    <div class="box">
        <!-- 添加 -->
        <div class="add jia tian" id="no1">
            <label>
                <i class="iconfont">&#xe9bd;</i>
                <input type="text" name="name" id="add_name" placeholder="姓名">
            </label>
            <br />
            <label>
                <i class="iconfont">&#xe601;</i>
                <input type="text" name="number" id="add_num" placeholder="手机号">
            </label>
            <br />
            <label>
                <i class="iconfont">&#xe647;</i>
                <input type="text" name="compangy" id="add_com" placeholder="公司">
            </label>
            <br />
            <button onclick="save()">保存</button>   
        </div>
        <!-- 所有 -->
        <div class="add all" id="no2">
            <div id="show_all"></div>
        </div>
        <!-- 查找 -->
        <div class="add jia find">
            <label>
                <i class="iconfont">&#xf014c;</i>
                <input type="text" name="name" id="find_name" placeholder="查找的联系人姓名">
            </label>
            <br />
            <button onclick="find()">查找</button>
            <br />
            <div id="find_result"></div>
        </div>
        <!-- 删除 -->
        <div class="add jia del"  id="no3">
            <label>
                <i class="iconfont">&#xe922;</i>
                <input type="text" name="name" id="del_name" placeholder="删除的联系人姓名">
            </label>
            <br />
            <button onclick="del()">删除</button>
            <br />
            <button onclick="delall()">删除所有联系人</button>
        </div>
    </div>
    <div class="foot">
        <a href="javascript:void(0)" class="iconfont icon">&#xe8dc;</a>
        <a href="javascript:void(0)" class="iconfont icon cur">&#xe675;</a>
        <a href="javascript:void(0)" class="iconfont icon">&#xf014c;</a>
        <a href="javascript:void(0)" class="iconfont icon">&#xe922;</a>
    </div>
</div>
<script src="js/phoneList.js"></script>   
</body>
</html>

phoneList.js文件：

// 添加联系人
var regCall = /^1[3,5,8]{1}\d{9}$/;
function save(){
    if(regCall.test($("#add_num").val())==false){
        alert("请输入正确的手机号");
    }else{
        if($("#add_name").val()&&$("#add_num").val()){
            if(localStorage.getItem("phoneList")){
                var Obj = JSON.parse(localStorage.getItem("phoneList"));
            }else{
                var Obj = {};
            }
            var info = {};
            info.name = $("#add_name").val();
            info.num = $("#add_num").val();
            info.com = $("#add_com").val();
            Obj[$("#add_name").val()] = info;
            // 将JSON对象转换为字符串对象
            var Objstr = JSON.stringify(Obj);
            // 将其存储到本地
            localStorage.setItem("phoneList",Objstr);
            $("#no1").hide();
            $(".foot a").eq(0).removeClass("cur");
            $("#no2").show();
            $(".foot a").eq(1).addClass("cur");
            showall();
        }
    }
}
// 查找联系人
function find(){
    $("#find_result").show();
    var findname = $("#find_name").val();
    if(findname){
        var Obj = JSON.parse(localStorage.getItem("phoneList"));
        var Objstr = Obj[findname];
        $("#find_result").html("手机号:<input type='text' value='" + Objstr.num + "'><br />" + "公司名:<input type='text' value='" + Objstr.com + "'>");
    } 
}
// 删除个别联系人
function del(){
    var Obj = JSON.parse(localStorage.getItem("phoneList"));
    for(var key in Obj){
        if($("#del_name").val()==key){
            delete Obj[key];
            break;
        }
    }
    localStorage.setItem("phoneList",JSON.stringify(Obj));
    $("#no3").hide();
    $(".foot a").eq(3).removeClass("cur");
    $("#no2").show();
    $(".foot a").eq(1).addClass("cur");
    showall();
}
// 删除所有联系人
function delall(){
    localStorage.removeItem("phoneList");
    $("#no3").hide();
    $(".foot a").eq(3).removeClass("cur");
    $("#no2").show();
    $(".foot a").eq(1).addClass("cur");
    showall();
}
// 显示多有联系人
function showall(){
    var Obj = JSON.parse(localStorage.getItem("phoneList"));
    var result = "<table>"
    result += "<tr><td>姓名</td><td>手机号</td><td>公司</td></tr>"
    for(var key in Obj){
        var showObj = Obj[key];
        result += "<tr><td>"+showObj.name+"</td><td>"+showObj.num+"</td><td>"+showObj.com+"</td></tr>";
    }
    result += "</table>"
    $("#show_all").html(result);
}
showall();
$(".foot a").click(function(){
    var i = $(this).index();
    $(this).addClass("cur").siblings().removeClass("cur");
    $(".box").children().eq(i).show().siblings().hide();
});
$(".foot a").eq(0).click(function(){
    $("#add_name").val("");
    $("#add_num").val("");
    $("#add_com").val("");
    $("#find_result").hide();
});
$(".foot a").eq(1).click(function(){
    showall();
    $("#find_result").hide();
});
$(".foot a").eq(2).click(function(){
    $("#find_name").val("");
});
$(".foot a").eq(3).click(function(){
    $("#del_name").val("");
    $("#find_result").hide();
});