利用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);
    }
  }