关于localStorage的实际应用

Posted var-chu

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了关于localStorage的实际应用相关的知识,希望对你有一定的参考价值。

在客户端存储数据

html5 提供了两种在客户端存储数据的新方法:

  • localStorage - 没有时间限制的数据存储
  • sessionStorage - 针对一个 session 的数据存储

之前,这些都是由 cookie 完成的。但是 cookie 不适合大量数据的存储,因为它们由每个对服务器的请求来传递,这使得 cookie 速度很慢而且效率也不高。

在 HTML5 中,数据不是由每个服务器请求传递的,而是只有在请求时使用数据。它使在不影响网站性能的情况下存储大量数据成为可能。

对于不同的网站,数据存储于不同的区域,并且一个网站只能访问其自身的数据。

HTML5 使用 javascript 来存储和访问数据。

技术分享图片

1.html代码

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <title>搜索中心</title>
    <link rel="stylesheet" href="assets/mui/css/mui.min.css">
    <link rel="stylesheet" href="assets/fa/css/font-awesome.min.css">
    <link rel="stylesheet" href="css/mobile.css">
</head>
<body>
<div class="lt_container">
    <!--顶部-->
    <header class="lt_topBar">
        <a href="javascript:history.back();" class="mui-icon mui-icon-back left"></a>
        搜索中心
    </header>
    <!--内容-->
    <div class="lt_content">
        <div class="lt_wrapper">
            <!--搜索框-->
            <div class="lt_search">
                <input type="search" placeholder="搜索你喜欢的商品">
                <a href="javascript:;">搜索</a>
            </div>
            <!--历史列表-->
            <div class="lt_history">
                <!--TODO-->
            </div>
        </div>
    </div>
    <!--底部-->
    <footer class="lt_tabs">
        <a href="index.html"><span class="fa fa-home"></span><p>首页</p></a>
        <a href="category.html"><span class="fa fa-bars"></span><p>分类</p></a>
        <a href="user/cart.html"><span class="fa fa-shopping-cart"></span><p>购物车</p></a>
        <a href="user/index.html"><span class="fa fa-user"></span><p>个人中心</p></a>
    </footer>
</div>
<script type="text/template" id="list">
    <% if($data.length){ %>
        <div class="tit">
            <span class="name">搜索历史</span>
            <a class="clear" href="javascript:;"><span class="fa fa-trash"></span>清空历史</a>
        </div>
        <ul>
            <% for(var i = $data.length-1 ; i >=0 ; i --){ %>
                <li><a href="javascript:;" data-key="<%=$data[i]%>"><%=$data[i]%></a><span data-index="<%=i%>" class="fa fa-close"></span></li>
            <% } %>
        </ul>
    <% }else{ %>
        <div class="tit">
            <span class="name">没有搜索历史记录</span>
        </div>
    <% } %>
</script>
<script src="assets/mui/js/mui.min.js"></script>
<script src="assets/zepto/zepto.min.js"></script>
<script src="assets/art-template/template-web.js"></script>
<script src="js/search.js"></script>
</body>
</html>

2.js代码

$(function () {
    $(‘.lt_search input‘).val(‘‘);
    /*1. 默认渲染当前历史记录*/
    var storageKey = ‘leTaoSearchHistoryList‘;
    /*1.1 需要约定当前网站存历史记录的KEY和数据类型   leTaoSearchHistoryList = ‘["电脑","手机"]‘*/
    var jsonString = localStorage.getItem(storageKey) || ‘[]‘;
    var historyList = JSON.parse(jsonString);
    $(‘.lt_history‘).html(template(‘list‘, historyList));
    //$(‘.lt_history‘).html(template(‘list‘, {list:historyList,encodeURIComponent:encodeURIComponent}));


    /*2. 点击搜索记录新的搜索历史  跳转去搜索列表页*/
    /*2.1 添加之后  追加在最前面*/
    /*2.2 如果遇见相同的关键字  删除之前的  追加在最前面*/
    /*2.3 当记录的条数超过10条  删除之前的后面的  追加在最前面*/
    $(‘.lt_search a‘).on(‘tap‘, function () {
        //去除输入的内容  去了两端空格
        var key = $.trim($(‘.lt_search input‘).val());
        // 判断是否输入
        if (!key) {
            mui.toast(‘请输入关键字‘);
            return false;
        }
        // 有关键字
        /*删除相同的*/
        $.each(historyList, function (i, item) {
            if (item == key) {
                historyList.splice(i, 1);
                /*中断循环*/
                return false;
            }
        });
        /*加载最后*/
        historyList.push(key);
        /*超过10条删掉*/
        if (historyList.length > 10) {
            historyList.splice(0, historyList.length - 10);
        }
        /*存起来*/
        localStorage.setItem(storageKey, JSON.stringify(historyList));
        /*渲染  会跳走 没有必要*/
        //$(‘.lt_history‘).html(template(‘list‘, historyList));
        /*跳转  传数据转成URL编码*/
        location.href = ‘/mobile/searchList.html?key=‘+encodeURIComponent(key);
    })

    /*3. 点击删除  删除当前的历史记录*/
    $(‘.lt_history‘).on(‘tap‘, ‘li span‘, function () {
        var index = $(this).data(‘index‘);
        console.log(index);
        historyList.splice(index, 1);
        /*存起来*/
        localStorage.setItem(storageKey, JSON.stringify(historyList));
        /*渲染  会跳走 没有必要*/
        $(‘.lt_history‘).html(template(‘list‘, historyList));
    }).on(‘tap‘,‘.clear‘,function () {
        /*4. 点击清空  清空所有的历史记录*/
        historyList = [];
        localStorage.setItem(storageKey, ‘[]‘);
        /*渲染  会跳走 没有必要*/
        $(‘.lt_history‘).html(template(‘list‘, historyList));
    }).on(‘tap‘,‘li a‘,function () {
        var key = $(this).data(‘key‘);
        /*跳转  传数据转成URL编码*/
        location.href = ‘/mobile/searchList.html?key=‘+encodeURIComponent(key);
    });

});

 

以上是关于关于localStorage的实际应用的主要内容,如果未能解决你的问题,请参考以下文章

如何在 localStorage 中破坏 JWT? [关闭]

片段里面的片段

仅在按照意图进行时才更改片段(在这种情况下,他们实际上共享应用程序)

简要记录下localStorage在项目中的应用之一

在 Redux 应用程序中写入 localStorage 的位置?

超实用的php代码片段