在页面上记录数据并实现pushstate（）的最佳方法

Question

My website has a single page which the content is dynamically changed within one article element.

<article id="dynamicArtile"></article>

I am trying to use pushState() and a popstate event listener to create history entries so my website functions with the back and forward buttons on the browser.

I would like to store the content of the page in a stateObj variable like so:

var stateObj = {content: dynamicArticle.innerHTML}

I am not very sure on how to reload the previous page using the stateObj variable.

Any pointers or examples would be great. Staying away from JQuery if possible

Answer 1

 function loadpage(url,f) { $.ajax({ url: '/ajax'+url, dataType: 'json' }).done(function(res){ $('.dynamicArtile').html(res.content); if(typeof f === 'undefined') window.history.pushState({path:url},'',url); }); } $(function(){ $('a').click(function(e) { // only links that point to your site var url = $(this).attr('href'); loadpage(url); return false; }); $(window).bind('popstate',function(){ loadpage(location.pathname + location.search,1); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 

i think you don't use stateObj variable

sorry for my terrible English.