Article history browsing record method in JavaScript

Implementation principle

The realization of this function is very simple, in a nutshell is to find a place to save some information on the page, if the page two times are visited, the new content to cover up the old content; When the page loads, the saved information is taken out of the display.

There are a lot of implementations, most of which are storing content in cookies, but there are some problems with storing data with cookies. For example, cookies are sent along with HTTP responses, which can have a certain impact on server-side response times, especially when using XMLHttpRequest objects to send or request data to the server.

The use of cookies although compared to soil, but most practical, since almost all browsers are compatible. The localstorage I use here, the data is completely saved in the browser, does not affect the server response, but IE6/7 is not available.

Here are some of the following functional points to complete:

• The storage content is transferred to a group object because localstorage can only save strings.
• Go heavy, if the saved content already exists, then delete the old data, whichever is the latest.
• Limit the number of saved, there is no need to save history indefinitely resulting in the list is very long.
Implementation steps
I've written a script called View History, less than 50 lines of code, to achieve the above three functions. can be downloaded in Github.

1. Referencing scripts and initializing objects

The code is as follows	Copy Code
<script src= "View-history.js" ></script> <script> /* <! [cdata[* * if (typeof localstorage!== ' undefined ' && typeof JSON!== ' undefined ') { var viewhistory = new Viewhistory (); Viewhistory.init ({ Limit:5, Storagekey: ' Viewhistory ', PrimaryKey: ' URL ' }); } *]]> * * </script>

2. Save browsing information on the article page

code is as follows

copy code

<script> /* <![ cdata[*/ //If an instance of Viewhistory exists, the page information can be written to. if (viewhistory) {     var page = {         title: document.getElementsByTagName (' title ') [0].innerhtml,         URL]: Location.href//This is PrimaryKey        //"Time": New Date ()   & nbsp;    //"Author": ...        //You can write more about it as the information in the browsing record    };     viewhistory.addhistory (page); } /*]]> */ </script>

3. Display History browsing record

The code is as follows

Copy Code

<script> /* <! [cdata[* * var wrap = document.getElementById (' view-history '); If an instance of Viewhistory exists and the outer node exists, the history browse record can be displayed if (viewhistory && wrap) { Get Browse Records var histories = Viewhistory.gethistories (); Assembly List var list = document.createelement (' ul '); if (Histories && histories.length > 0) { for (var i=histories.length-1; i>=0; i--) { var history = Histories[i]; var item = document.createelement (' li '); var link = document.createelement (' a '); Link.href = History.url; link.innerhtml = History.title; Item.appendchild (link); List.appendchild (item); } Insert Page Specific location Wrap.appendchild (list); } } *]]> * * </script>

Something

Only using Localstorage to do historical browsing records can not solve the timeliness problem, that is, the latest article information can not be obtained. If I add an article comment to the browsing record, the user sees only the number of comments he visited at the time. The solution is that some sites only save the ID of the article, and then dynamically load the article information when the page loads, such as: comments and average evaluation.