首页>建站相关>利用localStorage保存用户的浏览记录

利用localStorage保存用户的浏览记录

尝试在页面上加载了一言,没事刷新页面就会看到一条新的记录。偶然刷到这样一句话:“大佬永远都觉得自己是萌新”,秉承这种态度的人,一方面可能是出自谦虚。另一方面,技术迭代日新月异,知识浩如烟海,能在某一方面保持拔尖的人,确实为数不多。

说回localStoragelocalStorage

这是一个html5的新特性,主要用于本地存储,而博主想利用它,记录若干条用户的浏览数据,并在用户搜索时在搜索框附近展示,方便用户选择。

判断浏览器是否支持的测试方法:

if(!window.localStorage){
    console.log("unsupport localStorage");
}else{
    console.log("support localStorage");
}

localStorage的数据以名值对的方式存储,其所支持的数据限定为String类型,JSON类型需要转换,如下语句开以在本地存储一个键名为“name”的值:

localStorage.setItem("name", "小鸟数据");

提取的时候则是类似下面这样:

localStorage.getItem("name");

删除数据则需要使用“removeItem”:

localStorage.removeItem("key");

对数组的处理

因为数据限定为String类型,它并不能直接处理数组,所以进行对数组的保存前与提取后,需要进行转义:

var weekArray = ['周一'、'周二'、'周三'、'周四'、'周五']
localStorage.setItem('weekDay',JSON.stringify(weekArray));  //保存
weekArray = JSON.parse(localStorage.getItem('weekDay'));  //提取

用户浏览时判断是否保存

在wordpress中尝试了一下,当进入文章页时保存当前的页面title与地址:

  if($('body').hasClass('single')){
    let this_url=location.href;
    let this_title=document.title;
    if(localStorage.getItem('august_history')==null){
      august_history=[];
      august_history.push(this_title);
      august_history.push(this_url);
      localStorage.setItem('august_history',JSON.stringify(august_history));
    }else{
      august_history=JSON.parse(localStorage.getItem('august_history'));
      if(august_history.includes(this_title)){
        august_history.splice(august_history.indexOf(this_title),2);
        august_history.push(this_title);
        august_history.push(this_url);    
      }else if(august_history.length >15){
      august_history.splice(0,2);
      august_history.push(this_title);
      august_history.push(this_url);
    }else{
      august_history.push(this_title);
      august_history.push(this_url);
    }
    localStorage.setItem('august_history',JSON.stringify(august_history));
    }
  }

提取数组的方式

因为目前尝试Jquery,所以程序中出现了“$”,看官可以用原生的语句来代替功能:

  if(localStorage.getItem('august_history')!=null){
    let august_history=JSON.parse(localStorage.getItem('august_history'));
    $('#history-list').empty();
    for(i=0;i<august_history.length;i+=2){
      let newelement=document.createElement('a');
      newelement.innerText=august_history[i];
      newelement.href=august_history[i+1];
      $('#history-list').append(newelement);
    }
  }

标签: javascript

移动端可扫我直达哦~

推荐阅读

javascript 2023-10-13

用jquery取代a链接的title说明文字

站点的标签页原来是类似下图左侧的,在标签后用括号的形式展示了文章数量,边栏本来就小,加了数字后感觉内容变长,也有点影响标签文字的识别,就想着改成下图右侧的形式。记录一下原来生成含数字标签的代码,方便以后修改时的查询:<?php ...

建站相关 javascript

javascript 2023-10-11

js正则表达式的匹配与替换操作

利用exec()可以提取到某一段字符串中的指定的值,比如有下面这样一行字符串:a='-aaaa-bbbb-cccc-';想要分别提取其中的连续的字符,即“aaaa”、“bbbb”、“cccc”,书写正则表达式如下,并利用exec()函...

建站相关 javascript

javascript 2023-10-09

双栏多栏主题图片的lazyload问题

想为全站添加lazyload效果,这样在图片加载成功后会得到一个渐变显示的效果,看起来酷酷的。使用jquery的lazyload老牌插件,先写的js效果,后添加的模块,左边栏的图片加载的好好的,等到右边栏输出缩略图时,就出现了问题。l...

建站相关 javascript

javascript 2023-09-27

php如何传递数据给前端的javascript

尝试写主题的时候遇到了需要利用后台的设置数据去改变前端javascript设置的需求,比如后台设置一个幻灯的轮播速度为“5000”毫秒,需要将这个数据传递给js插件“slidejs”。最初的做法是利用php直接输出一段标签,类似下面这...

建站相关 javascript

javascript 2023-05-28

利用js获取当前页面的域名与网络协议等信息

浏览器会在用户有历史搜索记录之后自动弹出一些关键词供用户选择。但弹出的窗口的位置往往距离输入框过近,弹窗样式也不是特别好看。所以准备参考360,记录用户的搜索关键词,以标签的形式放在弹出窗口中,当输入框获取到焦点时,弹出自定义的窗口,...

建站相关 javascript

javascript 2023-04-27

利用console.time来测试一下js程序的执行效率

想测试一下自己的程序跑一圈需要多少时间,可以尝试启动一个计时器来跟踪它的占用时长。每一个计时器必须拥有唯一的名字。当以此计时器名字为参数调用 console.timeEnd() 时,浏览器将以毫秒为单位,输出对应计时器所经过的时间。启...

建站相关 javascript

javascript 2023-04-10

利用lazysizes.js实现图片懒加载

站点的专题图片稍有点大,恩,其实主要是服务器的带宽过小。导致访问的时候图片加载过慢,页眉部分会空出一块,直到加载结束。于是就想参照joe主题的样式,做一个图片懒加载的效果。joe主题使用了lazysizes实现图片的懒加载。于是查询了...

建站相关 javascript

javascript 2022-11-16

利用js代码获取淘宝详情页大图

利用代码成功获取到了京东的宝贝详情页的大图,想顺便尝试一下淘宝的大图的获取。与京东不同,京东修改了图片的路径地址以实现不同尺寸的展现,淘宝则是以修改图片后缀名的方式,如果想要展现宝贝的大图,直接去掉图片的后缀名就可以了。获取图片的js...

建站相关 javascript