客户端使用本地存储localStorage

最新推荐文章于 2022-12-06 19:55:32 发布
最新推荐文章于 2022-12-06 19:55:32 发布
阅读量446 收藏 2
点赞数
分类专栏： JavaScript 
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>搜索记录历史</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <meta name="apple-mobile-web-app-capable" content="no">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="format-detection" content="telephone=no">
    <style>
        .history{text-align:center;}
        #sec{width:50%;overflow:hidden;text-align:left;height:38px;border:1px solid #ccc;border-radius: 10px;}
        .delete:after{clear:both;content:'.';display:block;width: 0;height: 0;visibility:hidden;}
        .delete>div {border-radius: 50px;float: left;height: 23px;border: 1px solid #ccc;background: #E0E0E0;
            margin-top: 14px;margin-right: 10px;overflow:hidden;}
        #search{width: 141px;height: 37px;font-size: 14px;line-height: 14px;color: #959595;padding-bottom: 2px;}
        #his-dele{width: 22px;height: 22px;line-height: 22px;display: inline-block;background: #E0E0E0;color: #fff;
            border-radius: 50%;text-align: center;margin-left:10px;float: right;position: relative;top: -26px;}
    </style>
</head>
<body>
<input class="" id="sec"><!--搜索框-->
<button id="search">搜索</button>

<!--历史记录-->
<div class="current">最近搜索</div>
<div class="delete history" style="width: 100%;float: left"></div>

<!--删除按钮-->
<div class="history" id="his-dele">X</div>

<!--无存储记录-->
<div class="Storage" style="width: 100px;height: 100px;margin: 0 auto;">无存储记录</div>

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script>

    /*搜索记录相关*/

    var hisTime;//获取搜索时间数组
    var hisItem;//获取搜索内容数组
    var firstKey;//获取最早的1个搜索时间

    function init (){

        hisTime = [];//时间数组置空
        hisItem = [];//内容数组置空

        for(var i = 0; i < localStorage.length; i++){//数据去重
            if(!isNaN(localStorage.key(i))){//判断数据是否合法
                hisTime.push(localStorage.key(i));
            }
        }

        if(hisTime.length > 0) {
            hisTime.sort();//排序
            for (var y = 0; y < hisTime.length; y++) {
                localStorage.getItem(hisTime[y]).trim() && hisItem.push(localStorage.getItem(hisTime[y]));
            }
        }

        $(".delete").html("");//执行init(),每次清空之前添加的节点
        $(".Storage").show();
        for(var i = 0; i < hisItem.length; i++){

            $(".delete").prepend('<div class="word-break">'+hisItem[i]+'</div>');
            if(hisItem[i] != ''){
                $(".Storage").hide();
            }
        }

    }

    init();//调用

    $("#search").click(function(){
        var value = $("#sec").val();
        var time = (new Date()).getTime();

        if(!value){
            alert("你未输入搜索内容");
            return false;
        }
        //输入的内容localStorage有记录

        if($.inArray(value,hisItem) >= 0){

            for(var j = 0; j < localStorage.length; j++){
                if(value == localStorage.getItem(localStorage.key(j))){
                    localStorage.removeItem(localStorage.key(j));
                }
            }
            localStorage.setItem(time,value);

        }else{
            localStorage.setItem(time,value);
        }
        init();

    });

    //清除记录功能
    $("#his-dele").click(function(){
        var f = 0;
        for(;f<hisTime.length;f++){
            localStorage.removeItem(hisTime[f]);
        }
        init();
    });

    //苹果手机不兼容出现input无法取值以下是解决方法

    $( ".delete" ).on( "click", ".word-break", function() {
        var div = $(this).text();
        $('#sec').val(div);
    });

</script>
</body>
</html>

 

得益于H5的API，前端可以很方便的存储数据，除了cookie，新增的sessionStorage、localStorage可以在用户本地存储数据，这可以让前端实现一些，以前只能有数据库存储的功能。

搜索记录可以用前端实现，由于这些数据没有特别安全的要求，用户搜索过的关键词保存在用户本地是完全可以的。这样做也可以减少服务器的压力。

搜索记录应该采用localStorage永久的存储，当用户下次访问的时候，这个数据还在。

下面的例子是手机端网页，布局比较粗糙，功能都正常。

芝麻开门2015
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Django搭建个人博客：基于 LocalStorage 的点赞功能
weixin_43217710的博客
09-06 744
假设你的博客已经顺利部署到了线上。你写了很多好文章，和粉丝们互动并感受成就感。 现在你想更进一步，努力提高文章质量，使其更受读者欢迎，打造圈内一流博客。问题是该如何判断一篇文章是“受欢迎的”？靠浏览量是个方法，但是并不能区分出内容花拳绣腿的标题党。靠评论数也是个好方法，但个人博客通常读者不多，好文章零评论是很正常的。 这时候**“点赞”**功能就显得重要了。如果大部分读者都给了一个赞，那就表明文章...
localStorage用于本地存储
mayixixi的专栏
06-15 6951
localStorage对象是HTML5的客户端存储持久化数据的方案。为了能访问到同一个localStorage对象，页面必须来自同一个域名（子域名无效），使用同一种协议，在同一个端口上。 localStorage是Storage类型的实例。有以下的几种方法： ①clear（）：删除所有值。 ②getItem（name）：根据指定的名字name获取对应的值 ③key(index)：在指定的
hbuilder项目总结：localstorage本地储存
杨梦肖的博客
06-06 4206
只能保存字符串var file = '{"date":"' + myDate.toLocaleString() + '","id":"' + d.filename + '","name":"' + name + '"}'; 获取本地储存内容var filelist=localStorage.getItem("fileList"); 缓存本地储存内容localStorage.setItem("file
hbuilder mui 在ios环境下 localstorage 子iframe获取不到localstorage值，或者退出APP后再打开APP值丢失。
HW1233456的专栏
12-27 2189
最近碰到了这种情况，说实话很苦恼，找了两三天，发现很简单的解决方式，就是把文件发布到服务端，访问服务端文件就好了。 可是是为什么呢？ 这要从我设置的子iframe的src值说起，地址大概是这样的：forder/test.html 这样就会引起ios不适，他会认为这个页面和他的父页面是跨域一样的存在。可是是为什么呢？ 应该是domain的关系，他会认为forder/test.html这个地址...
HTML5客户端存储之 LocalStorage 和 SessionStorage
新的启程的博客
04-07 1384
window.onload = function(){ console.log('the browser is running ....'); var name = localStorage.username; if(!name){ name = prompt('what is your name?'); localStorage.username = name;
web本地存储-LocalStorage
weixin_33841722的博客
12-04 88
LocalStorage是HTML5 提供的在客户端存储数据的方法。替代但不同于之前的globalStorage,规则作用范围事先已设定好,是同一个域名（子域无效），使用同一种协议，在同一个端口上。目前主流的较新版浏览器除IE8以下的以外都支持localstorage。localStorage 方法存储的数据没有时间限制，除非主动删除，否则永久有效。目前仅支持字符串数据的存取。 localSto...
本地存储之sessionStorage与localStorage
shhghvvh的博客
12-06 598
目录1.本地存储的特性2.本地存储之sessionStorage(临时存储)2.1特点2.2使用方法2.2.1存储数据2.2.2获取数据 2.2.3删除数据2.2.4清空所有数据3.本地存储之localStorage(局部存储器) 3.1特点3.2使用方法3.2.1存储数据3.2.2获取数据3.2.3删除数据3.2.4清空所有数据1、数据存储在用户浏览器中2、设置、读取方便、甚至页面刷新不丢失数据3.容量较大，sessionStorage约5M、localStorage约20M4.只能存储字符串，可以将对象
本地存储localStorage用法详解
08-29
本地存储localStorage用法详解 本地存储localStorage是一种在HTML5中引入的新特性，主要用来解决cookie存储空间不足的问题。localStorage可以将数据存储在客户端，解决了cookie的4K限制问题，且可以将第一次请求的...
HTML5 本地存储 LocalStorage详解
09-28
HTML5的本地存储机制，尤其是LocalStorage，为网页应用提供了在客户端持久化数据的能力，从而极大地扩展了Web应用程序的功能。LocalStorage的出现解决了早期Cookie存储容量有限和限制过多的问题，为开发者提供了更加...
html5中localStorage本地存储的简单使用
09-28
使用localStorage需要注意的是，由于数据存储在客户端，因此涉及敏感信息时要谨慎使用，避免数据泄露。同时，不同的浏览器对于localStorage的实现可能略有差异，需要进行兼容性测试。此外，localStorage在同源策略的...
html5-本地存储
05-13
html5-本地存储,哈哈，希望对喜爱html5的同学有帮助啊！
JS+HTML5本地存储Localstorage实现注册登录及验证功能示例
10-15
在本文中，我们将深入探讨如何使用JavaScript（JS）与HTML5的本地存储机制Localstorage来实现用户注册和登录的功能，并进行基本的验证。Localstorage是Web应用存储数据的一种方法，它允许开发者在浏览器中持久化地...
oracle数据库的客户端和本地是什么意思
xiaoweids的博客
09-19 785
数据都是放在服务器端的，客户端只是负责展示特定的数据给用户看，也收集用户的数据，客户端还有一个作用，就是代理，其他程序，比如Jdbc或者其他程序可以通过客户端这个通道，或者桥梁，把数据传递给服务器，以及从服务器获取数据，给需要的程序。4. 服务器就是一个存数据的地方，你可以理解为就管理着一些文件，类似于excel这样的，只是性能更好，更专业。顺带的，安装本地服务器的时候，会附加的安装一个客户端，所以本地数据库=服务器+客户端软件。而在本地装一个数据库，其实就是在本地安装一个服务器软件。
客户端存储cookie + localStorage + sessionStorage 和 服务器存储 cookie + session
weixin_47075145的博客
08-23 1717
设置cookie:ctx.cookies.set(key,value)获取cookie: ctx.cookie.get(key)1.后端的cookie的存储位置：后端设置的cookie会存储在客户端浏览器里面，前端设置的也在客户端浏览器里面，且所在的位置相同。
客户端存储localStorage和sessionStorage以及Cookie
object not found的博客
09-19 7592
正常情况下，我们前端写的静态页面，只要刷新，就重置了，无法保留任何信息。为解决这一弊端我们可以利用js中的客户端数据存储。在JS中存储在客户端数据有很多方式：Storage有两个对象：localStorage （本地存储）和sessionStorage（临时存储），Cookie，indexedDB（一般用于游戏开发存储体积较大）
cookie、localStorage、sessionStorage三种客户端存储方式
jjjh968的博客
09-14 2207
cookie cookie是http协议下，服务端或者脚本可以维护客户端信息的一种方式。 域、路径、失效时间和安全性都是服务器给浏览器的指示，它们不会随着请求发送给服务器，发送给服务器的只有名称与值对。 sessionStorage（会话存储） 同源策略： 不同于 Cookie， sessionStorage 访问限制更高，只有当前设定了 sessionStorage 的域下才能访问。单标签页： 两个相同域下的标签页不能互通。 即：在关闭标签页或者新开的标签页下都不能访问之前写下的 sessionS
客户端储存的三种方式localStorage 、sessionStorage、Cookies
大董的博客
12-30 6909
Web应用允许使用浏览器提供的API实现将数据存储到用户的电脑上。这种客户端存储相当于赋予了Web浏览器记忆功能。比方说，Web应用就可以用这种方式来“记住”用户的配置信息甚至是用户所有的状态信息，以便准确地“回忆”起用户上一次访问时候的状态。客户端存储遵循“同源策略”，因此不同站点的页面是无法互相读取对方存储数据的，而同一站点的不同页面之间是可以互相共享存储数据的，它为我们提供了一种通信机制，例
客户端存储sessionStorage、localStorage详解
火星基地
05-17 632
1. Web Storage 简介 Web Storage 的目的是解决通过客户端存储不需要频繁发送回服务器的数据时使用cookie的问题。 Web Storage 的第 2 版定义了两个对象：localStorage和sessionStorage。localStorage是永久存储机制，sessionStorage是跨会话的存储机制。 这两者的主要区别是： sessionStorage对象只存储会话数据，这意味着数据只会存储到浏览器关闭。存储在sessionStorage中的数据不受页面刷新影响，可以在
客户端存储:localStorage,sessionStorage,cookie之间的异同?
梦里梦一的博客
08-01 550
前言:localStorage和sessionStorage是h5中新增的API,而cookie是h5之前就有的,cookie技术也叫会话控制技术.在存储数据这个功能,三者没有什么本质性区别,但是localStorage是比cookie更优秀的技术. 三者的区别: 特性 cookie localStorage sessionStorage 数据的生命周期 没...
本地存储localstorage
最新发布
07-27
localStorage 是 HTML5 提供的一种在客户端进行本地存储的方式。它允许在用户的浏览器中存储键值对数据，并且该数据会一直保存在用户的设备上，即使用户关闭了浏览器也不会丢失。 要使用 localStorage，可以使用 JavaScript 的 localStorage 对象进行操作。可以使用以下方法来操作 localStorage： 1. 存储数据： ```javascript localStorage.setItem(key, value); ``` 2. 获取数据： ```javascript var value = localStorage.getItem(key); ``` 3. 删除数据： ```javascript localStorage.removeItem(key); ``` 需要注意的是，存储在 localStorage 中的数据是以字符串的形式保存的。如果要存储对象或其他非字符串类型的数据，需要先将其转换为字符串，再存储到 localStorage 中。 另外，localStorage 的存储容量是有限的，通常在 5MB 到 10MB 之间。超过容量限制时，可能会导致无法继续存储数据。因此，在使用 localStorage 时，需要注意存储数据的大小和数量，以避免超出限制。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值