js如何实现历史记录?

JavaScript023

js如何实现历史记录?,第1张

在被浏览页面加入一段代码实现这样的功能:

根据页面标题和url写入locationStorage

写入时,只写入最后10条记录

在显示历史页面,读取locationStorage把历史记录显示出来

//读写cookie函数

function GetCookie(c_name)

{

 if (document.cookie.length > 0)

 {

  c_start = document.cookie.indexOf(c_name + "=")

  if (c_start != -1)

  {

   c_start = c_start + c_name.length + 1

   c_end   = document.cookie.indexOf("",c_start)

   if (c_end == -1)

   {

    c_end = document.cookie.length

   }

   return unescape(document.cookie.substring(c_start,c_end))

  }

 }

 return null

}

function SetCookie(c_name,value,expiredays)

{

 var exdate = new Date()

 exdate.setDate(exdate.getDate() + expiredays)

 document.cookie = c_name + "=" +escape(value) + ((expiredays == null) ? "" : "expires=" + exdate.toGMTString()) //使设置的有效时间正确。增加toGMTString()

}

把文件引进来后。点击并创建COOKIE

/创建cookie

function getCookies(ids,title){

 var saveid = GetCookie('id')

    var savetitle = GetCookie('products')

 if(saveid != null && savetitle != null)

 {

   var saveids = saveid.split(',')

         var savetitles = savetitle.split(',')

   var hasid = false

   saveid = ''

         savetitle = ''

   j = 1

   for(i=saveids.length-1i>=0i--)

   {

      if(saveids[i]==ids && hasid) continue

      else {

       if(saveids[i]==ids && !hasid) hasid = true

       saveid += (saveid=='' ? saveids[i] : ','+saveids[i])

                savetitle += (savetitle=='' ? savetitles[i] : ','+savetitles[i])

       j++

       if(j==10 && hasid) break

       if(j==9 && !hasid) break

      }

   }

     if(hasid) { return false }

     else saveid += ','+ids

         savetitle += ','+title

   SetCookie('id',saveid,1)

         SetCookie('products',savetitle,1)

 }

 else

 {

         SetCookie('id',ids,1)                 //这个是文章ID,好做链接的

        SetCookie('products',title,1)  //这个是文章标题,用来显示的

 }

}

创建好了在内容页读取COOKIE。

<!--输出cookie-->

        <script type="text/javascript">

            var saveid = GetCookie('id')

            var savetitle = GetCookie('products')

         if(saveid != null && savetitle != null)

         {

          var saveids = saveid.split(',')

                var savetitles = savetitle.split(',')

                var hasid = false

          saveid = ''

                savetitle = ''

     for(i=saveids.length-1i>=0i--)

           {

              document.write("<li class=\"listline2 textflow\" onmouseover=\"this.style.backgroundColor='#e4e5ea'\"

onmouseout=\"this.style.backgroundColor=''\">" + 

              "<span class=\"adKeyword\">·</span> <a href=\"/plus/view.php?aid="+saveids[i]+"\" title=\""

+savetitles[i]+"\">"+savetitles[i]+"</a></li>")

      }

       }

        </script>

最后,清除COOKIE。这个可用AJAX实现。其实用JS也有那种效果的。

//消除cookie,这儿用AJAX更好的

function destroy_cookie(){

    SetCookie('id','',1)

    SetCookie('products','',1)

    document.getElementById('viewHistory').innerHTML=""

    window.alert('你已成功清除浏览历史记录!')

}

ok了。要的时候可以直接调函数。没有函数的可以直接写在需要的地方就好了。其实不难。