当前位置:首页 > 网站建设 > 源码技巧 > 正文内容

localStorage保存搜索记录的简单使用

热淘网10个月前 (05-31)源码技巧234

在HTML5中,加入了一个localStorage对象,这个对象主要是用来进行本地存储使用的。localStorage拓展了cookie的4K限制,localStorage相当于一个5M的前端页面数据库,对于某些数据,比如图片、搜索记录可以直接存在浏览器端,从而减小带宽。

localStorage用于长久保存整个网站的数据,保存的数据没有过期时间,除非手动删除。而cookie则是用过期时间,到时会自动删除。

(1)保存数据

localStorage.setItem(key,value);

(2)读取数据

localStorage.getItem(key);

(3)移除数据

localStorage.removeItem(key);

(4)清空localStorage所有数据

localStorage.clear()

另外,由于localStorage存储的都是字符串,如果value设置为一个对象,则会调用该对象的toString()方法,然后存储。

localStorage.setItem("person",{"name": "xiaoming",toString: function(){ returnthis.name;}})

结果:

 一般我们会将JSON存入localStorage中,这个时候我们就可以使用JSON.stringfy()方法来将JSON转换为JSON字符串。在读取的时候,使用JSON.parse()转换为JSON对象。

这里使用localStorage来保存搜索记录,顺便复习下art-template,利用模板引擎来渲染页面

<!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 id="del"><a href="javascript:;">清空搜索记录</a></div>
<ul id="uu">
    <li>没有搜索记录</li>
</ul>



<script src="jquery.min.js"></script>
<script src="template-web.js"></script>

<script id="tpl-search" type="text/html">
    {{ each historys }}
        <li data-index="{{ $index }}"><span>{{ $value }}</span><a href="javascript:;">删除</a></li>
    {{/each}}
</script>

<script>
    $(function () {
        //当搜索时向localStorage存储
        var historyList = window.localStorage.getItem("historys") || '[]'; 
        //存储在localStorage中的都是string类型
        var historys = JSON.parse(historyList); //转为数组对象
        $("[type=button]").on("click", function () {
            var keywords = $("[type=search]").val();
            if(!keywords){
                alert("请填值");
                $("[type=search]").focus();
                returnfalse;
            }
            historys.push(keywords);
            window.localStorage.setItem("historys",JSON.stringify(historys));
            render();
        });

        //根据localStorage向页面渲染,var render = function () {
            var html = template("tpl-search", {"historys": historys}); //利用模板art-template渲染页面
            html = html || "<li>没有搜索记录</li>";
            $("#uu").html(html);
        };
        render(); //刚进页面就渲染页面//单条删除
        $("#uu").on("click","a", function () {
           var index = $(this).parent().data("index");
           historys.splice(index,1);
           window.localStorage.setItem("historys", JSON.stringify(historys));
           render();
        });

        //清空历史记录
        $("#del").on("click","a",function () {
            historys = [];
            window.localStorage.setItem("historys", JSON.stringify(historys));
            render();
        })

        // localStorage.removeItem("name")// localStorage.clear()
    });
</script>
</body>
</html>

注:关于art-templete的使用注意:

templete(filename,content)

这个函数是用来加载模板的,通常返回的是经过渲染的html代码。

其中第一个参数filename是在<script></script>标签中定义的id值,第二个参数是一个对象,形式为{Object,string},这个数据会传到定义的模板中来渲染。


扫描二维码推送至手机访问。

版权声明:本文由热淘网发布,如需转载请注明出处。

本文链接:https://www.retao5.com/yuanma/1560.html

标签: localStorage
分享给朋友:

相关文章

通用支付宝960宽滑动banner首页幻灯片代码

通用支付宝960宽滑动banner首页幻灯片代码

[img=500,0]http://mushou.5d6d.com/attachment.php?aid=4119&k=96f1966d23f65c07ae37ee5a67fc1057&t=12821...

一行代码解决模板兼容IE8 问题

一行代码解决模板兼容IE8 问题

前两天装了windows 7系统发现 用IE8上自己的站 边的乱七八糟在网上转了一下发现了一个简单的解决方案方法如下:只需要在页面中加入如下HTTP meta-tag: 只要IE8一读到这个标签,它就...

首页js轮播,图片可后台控制。

首页js轮播,图片可后台控制。

统默认就4种flash轮播,样式比较单一。经常我们用一些js轮播替换,这样有利于seo。一般我们都采用ftp上传图片覆盖,操作比较麻烦。小想自己写了个js调用系统flash_data.xml,读取后台...

php使用TXT数据库(读取和修改文本)

php使用TXT数据库(读取和修改文本)

[code]文本数据库的例子本来太多,但是为了逻辑简化,最好通过专门接口实现文件与数据的转换,可以采用我下面的模板编写://文件最前面定义两个全局变量,数据库文件名和用户数组$pwd_db_file=...

在模版中直接写判断语句的格式举例

在模版中直接写判断语句的格式举例

[code] 会员登陆 注册你好:$_SGLOBAL[supe_username][/code]...

模块调取的论坛数据,详细内容相关字符怎么过滤!

模块调取的论坛数据,详细内容相关字符怎么过滤!

[code]function texthtml($str){$str = str_replace(" ","",$str);$str = str_replace(" ","",$str);$str =...

发表评论

访客

◎欢迎参与讨论,请在这里发表您的看法和观点。