针对存在Ajax的页面状态的处理

编  写：    zhangyue
日  期：    2017.1.6
说  明：    针对ajax页面的一些前进后退的处理

一 Ajax页面的特殊性
存在Ajax加载数据的页面，其url不会自动发生改变，除非通过手动更改url。此时，导致了当页面发生ajax加载的时候，页面url状态不会发生改变，后退页面时，会直接返回原始状态。

针对单页面应用，如果在A页面进行相关操作，然后跳转到B页面，此时再从B页面返回到A页面，A页面会重新加载，不会保持A页面之前进行的操作。

二 解决办法的过程
2.1 location.hash
通过location.hash调整地址栏的地址,使得浏览器里边的“前进”、“后退”按钮能正常使用,。然后再根据hash值的不同来显示不同的面板.
http://shopdev.ci123.com/svn/zydev/xinyi/category/itemlist/#sort=price&order=asc
#代表网页中的一个位置。其右面的字符，就是该位置的标识符

为网页位置指定标识符，有两个方法。一是使用锚点，比如，二是使用id属性。

#是用来指导浏览器动作的，对服务器端完全无用。所以，HTTP请求中不包括#。第一个#后面出现的任何字符，都会被浏览器解读为位置标识符。这意味着，这些字符都不会被发送到服务器端,改变#后的部分,不会重新加载网页。

每一次改变#后的部分，都会在浏览器的访问历史中增加一个记录，使用"后退"按钮，就可以回到上一个位置。这对于ajax应用程序特别有用，可以用不同的#值，表示不同的访问状态，然后向用户给出可以访问某个状态的链接。

window.location.hash这个属性可读可写。读取时，可以用来判断网页状态是否改变；写入时，则会在不重载网页的前提下，创造一条访问历史记录。
window.location.hash=value;

2.2 localStorage，SessionStorage
a.存储客户端临时信息的对象

b.localStorage生命周期是永久，这意味着除非用户显示在浏览器提供的UI上清除localStorage信息，否则这些信息将永远存在。

c.sessionStorage生命周期为当前窗口或标签页，一旦窗口或标签页被永久关闭了，那么所有通过sessionStorage存储的数据也就被清空了。

d.使用：

键值对方式储存值：
    localStorage.key = v
    localStorage['key'] = v
    localStorage.setItem("key",v)
取值：
    localStorage.key
    localStorage.getItem("key");
清除：
    localStorage.remove("key");
    localStorage.clear();

通过localStorage或sessionStorage存储关键字段，当重新加载该页面的时候，检测，如果存在该字段，通过字段拼接，重新同过ajax请求加载数据；或者直接存储当前页面的某个元素的所有内容，重新加载该页面的时候，检测，如果存在值，则直接填充，无需再次去通过ajax请求

三 存在的问题
1 如果改变location.hash，那么会导致history增多，返回时，需要一步一步回退，不能直接返回原始界面，用户体验差。
2 可以考虑使用history的Api：

history.pushstate()；//增加当前url
history.replacestate();//替换当前url