在客户端存储数据

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的实际应用的更多相关文章

  1. HTML5 localStorage本地存储

    介绍 localStorage(本地存储)的使用方式.包括对存储对象的添加.修改.删除.事件触发等操作. 目录 1. 介绍 1.1 说明 1.2 特点 1.3 浏览器最小版本支持 1.4 适合场景 2 ...

  2. 似懂非懂的localStorage和sessionStorage

    一.区别 相信很多人都见过这两个关于HTML5的新名词!HTML5种的web storage包含两种存储方式:localStorage和sessionStorage,这两种方式存储的数据不会自动发给服 ...

  3. 将css和js缓存到localStorage缓存，提高网页响应速度

    适用于小站点,这很极致,很快速~~ /** * Created by SevenNight on 2016/9/21 0021. * 插件功能:使用localStorage缓存js和css文件,减少h ...

  4. cookies，sessionStorage和localStorage的区别---web前端sessionStorage和localStorage区别

    sessionStorage用于本地存储一个会话(session)中的数据,这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁.因此sessionStorage不是一种持久化的本地 ...

  5. sessionStorage 和 localStorage 、cookie

    sessionStorage 和 localStorage html5中web storage包括两种储存方式:sessionStorage 和 localStorage sessionStorage ...

  6. 浏览器对localstorage的支持情况以及localstorage在saas系统中的应用实践思考

    首先,还是要说,任何一种新特性的引入,通常有着其特有的场景和解决的目标需求,localstorage也一样.在我们的应用场景中,主要在金融业务服务的saas系统.其中涉及很多更改频率很多的元数据的客户 ...

  7. 初识html5的localStorage本地存储

    一.概述 HTML5 提供了两种在客户端存储数据的新方法: localStorage - 没有时间限制的数据存储 sessionStorage - 针对一个 session 的数据存储 之前,这些都是 ...

  8. HTML5本地存储Localstorage

    什么是localstorage 前几天在老项目中发现有对cookie的操作觉得很奇怪,咨询下来是要缓存一些信息,以避免在URL上面传递参数,但没有考虑过cookie会带来什么问题: ① cookie大 ...

  9. HTMl5的存储方式sessionStorage和localStorage详解

    html5中的Web Storage包括了两种存储方式:sessionStorage和localStorage.sessionStorage用于本地存储一个会话(session)中的数据,这些数据只有 ...

  10. localStorage使用总结

    一.什么是localStorage.sessionStorage 在HTML5中,新加入了一个localStorage特性,这个特性主要是用来作为本地存储来使用的,解决了cookie存储空间不足的问题 ...

随机推荐

  1. awk命令用法

    awk:把文件逐行的读入,以空格为默认分隔符将每行切片,切开的部分再进行各种分析处理,是一个强大的文本分析工具,在对数据分析并生成报告时很有优势. awk有3个不同版本: awk.nawk和gawk, ...

  2. Python入门 —— 05时间日期处理小结

    此文多涉及基础,如果想要深入理解则到文末,有提供链接 涉及对象 1. datetime 2. timestamp 3. time tuple 4. string 5. date - datetime基 ...

  3. go加密算法:非对称加密(三)--Elliptic

    看了2星期的区块链原理与运行机制,加密这里开始变得有些生疏,花了一天时间复习了一些;看到了之前忽略的,也学会了椭圆曲线加密. //基础板:浅显易懂package main import ( " ...

  4. Java Web项目里 classpath 具体指哪个路径

    classpath路径指什么 只知道把配置文件如:mybatis.xml.spring-web.xml.applicationContext.xml等放到src目录(就是存放代码.java文件的目录) ...

  5. Docker之centos 简单安装

    centos6因为系统自带的可执行的应用程序与 docker 包名字发生冲突,所以重新命名 docker 的RPM包名字为 docker-io. 首先卸载docker包 sudo yum -y rem ...

  6. 大数据学习之Hadoop环境搭建

    一.Hadoop的优势 1)高可靠性:因为Hadoop假设计算元素和存储会出现故障,因为它维护多个工作数据副本,在出现故障时可以对失败的节点重新分布处理. 2)高扩展性:在集群间分配任务数据,可方便的 ...

  7. 『Python基础-14』匿名函数 `lambda`

    匿名函数和关键字lambda 匿名函数就是没有名称的函数,也就是不再使用def语句定义的函数 在Python中,如果要声匿名函数,则需要使用lambda关键字 使用lambda声明的匿名函数能接收任何 ...

  8. Centos配置网卡子接口

    1.检查OS是否加载802.1q模块: 方法一: [root@rs2 ~]# modinfo 8021q 方法二: [root@rs2 ~]# modinfo -F filename 8021q 方法 ...

  9. Go语言入门（二）Go语言中的变量、常量、数据类型、流程控制以及函数

    Go语言中的变量 通常用var关键声明变量,有常规方式和简化方式. 常规方式: var name1 type1 name1 = value1 //赋值 简化方式: var name2 = value1 ...

  10. 安装 RobotFramework 可视化工具 RIDE

    1. 概述 robot framework 的安装 可视化工具 ride 的安装 2. 准备 安装缘由 来自一本书 书名: Robot Framework自动化测试修炼宝典 豆瓣上有好评不少, 坏评也 ...