day51 HTML5的本地存储

本地存储

随着互联网的快速发展，基于网页的应用越来越普遍，

同时也变的越来越复杂，为了满足各种各样的需求，会经常性在本地存储大量的数据，

HTML5规范提出了相关解决方案。

特性
- 设置、读取方便
- 容量较大，sessionStorage约5M、localStorage约20M
- 只能存储字符串，可以将对象JSON.stringify() 编码后存储
window.sessionStorage
- 生命周期为关闭浏览器窗口
- 在同一个窗口(页面)下数据可以共享
window.localStorage
- 永久生效，除非手动删除（服务器方式访问然后清除缓存）
- 可以多窗口（页面）共享
方法
- setItem(key, value) 设置存储内容
- getItem(key) 读取存储内容
- removeItem(key) 删除键值为key的存储内容
- clear() 清空所有存储内容
  例子如下：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>首页</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        body{
            margin-left: 300px;
        }
        ul{
            list-style: none;
        }
        ul li,div{
            width: 250px;
            padding: 10px 0;
            margin-left: 10px;
            border-bottom: 1px dashed #ccc;
            height: 20px;
        }
        a{
            float: right;
        }
        input{
            padding: 5px;
            margin: 10px;
        }
    </style>
</head>
<body>
<input type="search" placeholder="输入搜索关键字"/>
<input type="button" value="搜索"/>
<div><a href="javascript:;">清空搜索记录</a></div>
<ul>
    <li>没有搜索记录</li>
    <li><span>手机</span><a href="javascript:;">删除</a></li>
    <li><span>手机</span><a href="javascript:;">删除</a></li>
    <li><span>手机</span><a href="javascript:;">删除</a></li>
    <li><span>手机</span><a href="javascript:;">删除</a></li>
    <li><span>手机</span><a href="javascript:;">删除</a></li>
</ul>
<script src="js/jquery.min.js"></script>

</body>
</html>
<script>
    //存储前先预设置一个历史记录
//    var history=["1","2","3"];

var random=function(){
    var html="";
    $(listArr).each(function(i,item){
        html+= '<li><span>'+item+'</span><a href="javascript:;" data-index='+i+'>删除</a></li>'
    })
    html=html||'<li>现在没有历史记录</li>';
    $("ul").html(html);
};
random();


//1.根据历史记录渲染列表
    var oldList=localStorage.getItem("history")||"[]"; //若无历史记录则默认为空数组
    var listArr=JSON.parse(oldList);
    random();




    //2.渲染完成后 点击搜索存储数据并重新刷新列表
    $('[type="button"]').on("click",function(){
        var value= $.trim($('[type="search"]').val());
        if(!value){
            alert("请输入关键字");
            return false;
        }
        listArr.push(value);
        localStorage.setItem("history",JSON.stringify(listArr));
        random();
        $('[type="search"]').val("");
    });





 //3.点击删除之后删除响应的列表数据，更新列表，并清除相应的缓存数据
    $("ul").on("click","a", function () {
        var index=$(this).data("index");
        //删除
        listArr.splice(index,1);
        localStorage.setItem("history",JSON.stringify(listArr));
        random();
    });

    //4.点击清空 清空列表和 clear缓存数据
    $("div>a").click(function(){
        //清空数组
        listArr=[];
        //清空数据库
        localStorage.removeItem("history");
//        localStorage.setItem("history","");
//        localStorage.clear();
        random();
    })
</script>

day51 HTML5的本地存储

猜你喜欢