Methods for viewing history of articles in JavaScript

The most common method to review historical data is to directly use cookies. Of course, session or data is stored directly in the database, in this way, you can view your browsing history at any address. Next I will introduce the method in cookie.

Implementation Principle

This function is very easy to implement. Simply put, you can find a place to save some page information. If the page is accessed twice, the new content will overwrite the old content; when the page is loaded, the saved information is displayed.

There are also many implementation methods. The most common solution is to store content in cookies, but there are some problems in storing data with cookies. for example, when a cookie is sent along with an HTTP response, it may affect the server response time to a certain extent, especially when the XMLHttpRequest object is used to send or request data to the server.

Although cookies are relatively earthy, they are most useful because they are compatible with almost all browsers. the localStorage I use here, the data is completely stored in the browser, does not affect the server response, but cannot be used in IE6/7.

The following functions must be completed:

• Convert the stored content to an array object because localStorage can only save strings.
• Deduplication. If the saved content already exists, the old data will be deleted, whichever is the latest.
• Limit the number of saved records. There is no need to save the history infinitely, resulting in a too long list.
Steps
I have written a script named View History, with less than 50 lines of code to implement the above three functions. You can download it from Github.

1. reference the script and initialize the object

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

The Code is as follows:

Copy code

<Script> /* <! [CDATA [*/ // If the ViewHistory instance exists, the page information can be written. If (viewHistory ){ Var page = { "Title": document. getElementsByTagName ('title') [0]. innerHTML, "Url": location. href // This is the primaryKey // "Time": new Date () // "Author ":... // More related content can be written here as information in the browsing record }; ViewHistory. addHistory (page ); } /*]> */ </Script>

3. Display historical browsing records

The Code is as follows:

Copy code

<Script> /* <! [CDATA [*/ Var wrap = document. getElementById ('view-history ');   // If the ViewHistory instance exists and the outer node exists, the browsing history is displayed. If (viewHistory & wrap ){ // Obtain browsing 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 ('lil '); Var link = document. createElement ('A '); Link. href = history. url; Link. innerHTML = history. title;   Item. appendChild (link ); List. appendChild (item ); }   // Insert a specific page location Wrap. appendChild (list ); } } /*]> */ </Script>

Remarks

Using localStorage for historical browsing records cannot solve the timeliness problem, that is, cannot obtain the latest article information. if I add the number of comments to the browser record, the user will only see the number of comments he accessed at that time. solution: some websites only store the Article ID and dynamically load the article information when loading the page, such as the number of comments and average rating.