浏览器缓存问题

[-xice-]

今天遇到一个情况，具体如下：
一个页面是个列表，刚进入时内容为：1、2、3、4、5
上拉加载后，内容增加变为：1、2、3、4、5、6、7、8、9、10
这时点击某一行，进入详情，之后再后退回列表页，列表页内容无法保持1、2、3、4、5、6、7、8、9、10

大神们，有啥好的方案吗？html5的history和本地缓存都不行，当加载过多后，容量肯定不够。
用的是纯html+jquery2，没使用sencha等库(加载过慢)，并且后退无法避免，屏蔽不掉。

[slwsss]

http://www.cnblogs.com/xumingxiang/archive/2012/11/26/2787530.html

[Go 旅城通票]

ajax后退解决方案（一） 可以看下这个。解决回退js生成内容不存在的

[-xice-]

具体的情况有点不太对，这种方式能解决ajax后退的问题，但是我这个从列表页进入详情页是跳转，不是ajax

[Go 旅城通票]

firefox12可以回退保存js动态生成的内容，ie和chrome不行，但是可以执行内嵌的js代码，你可以在页面用js添加内容的时候同时修改这个页面的hash，当转向到其他页面时，在回退时会回退到有hash的页面，依据hash值执行你需要的操作

1.html

<input type="button" value="添加当前时间到页面"  onclick="setBody()"/><br />
<input type="button" value="添加ABC到页面"  onclick="setBody('abc')"/><br />
<a href="2.html">2.html</a>
<script>
    var ff = navigator.userAgent.indexOf('Firefox') != -1;

    function setBody(html) {
        document.body.innerHTML += '<br>' + (html || new Date().toLocaleString());
        var hk = html ? ',abc,' : ',date,';
        if (location.hash.indexOf(hk) == -1) location.hash += hk;
    }
    if (!ff) { //由于firefox回退能保存js动态生成内容，所以不对firefox执行hash判断
        var hash = location.hash;
        if (hash.indexOf('date') != -1) //hash中包含添加时间动作，则执行下操作
            setBody();
        if (hash.indexOf('abc') != -1)//hash中包含添加abc动作，则执行下操作
            setBody('abc');
    }
</script>

2.html

<a href="javascript:history.back()">back</a>

[未知数]

后退也并非一定没法处理， 可以试试 hash屏蔽后退的 setTimeout(function(){for(var i=0;i<10;i++)window.location.href = "#"+i;},10);

[-xice-]

引用 4 楼 showbo 的回复:

firefox12回退可以js动态生成的内容，ie和chrome不行，但是可以执行内嵌的js代码，你可以在页面用js添加内容的时候同时修改这个页面的hash，当转向到其他页面时，在回退时会回退到有hash的页面，依据hash值执行你需要的操作 1.html

<input type="button" value="添加当前时间到页面"  onclick="setBody()"/><br />
<input type="button" value="添加ABC到页面"  onclick="setBody('abc')"/><br />
<a href="2.html">2.html</a>
<script>
    var ff = navigator.userAgent.indexOf('Firefox') != -1;

    function setBody(html) {
        document.body.innerHTML += '<br>' + (html || new Date().toLocaleString());
        var hk = html ? ',abc,' : ',date,';
        if (location.hash.indexOf(hk) == -1) location.hash += hk;
    }
    if (!ff) { //由于firefox回退能保存js动态生成内容，所以不对firefox执行hash判断
        var hash = location.hash;
        if (hash.indexOf('date') != -1) //hash中包含添加时间动作，则执行下操作
            setBody();
        if (hash.indexOf('abc') != -1)//hash中包含添加abc动作，则执行下操作
            setBody('abc');
    }
</script>

2.html

<a href="javascript:history.back()">back</a>

那么当用户已经加载了十多页后，后退回来岂不是得等半天？

[-xice-]

引用 5 楼 wzs_xyz 的回复:

后退也并非一定没法处理， 可以试试 hash屏蔽后退的 setTimeout(function(){for(var i=0;i<10;i++)window.location.href = "#"+i;},10);

能具体点吗？我用history的新api，替换了列表页的url，也不行。。。

[Go 旅城通票]

引用 6 楼 xiceblue 的回复:

[quote=引用 4 楼 showbo 的回复:] firefox12回退可以js动态生成的内容，ie和chrome不行，但是可以执行内嵌的js代码，你可以在页面用js添加内容的时候同时修改这个页面的hash，当转向到其他页面时，在回退时会回退到有hash的页面，依据hash值执行你需要的操作 1.html

<input type="button" value="添加当前时间到页面"  onclick="setBody()"/><br />
<input type="button" value="添加ABC到页面"  onclick="setBody('abc')"/><br />
<a href="2.html">2.html</a>
<script>
    var ff = navigator.userAgent.indexOf('Firefox') != -1;

    function setBody(html) {
        document.body.innerHTML += '<br>' + (html || new Date().toLocaleString());
        var hk = html ? ',abc,' : ',date,';
        if (location.hash.indexOf(hk) == -1) location.hash += hk;
    }
    if (!ff) { //由于firefox回退能保存js动态生成内容，所以不对firefox执行hash判断
        var hash = location.hash;
        if (hash.indexOf('date') != -1) //hash中包含添加时间动作，则执行下操作
            setBody();
        if (hash.indexOf('abc') != -1)//hash中包含添加abc动作，则执行下操作
            setBody('abc');
    }
</script>

2.html

<a href="javascript:history.back()">back</a>

那么当用户已经加载了十多页后，后退回来岂不是得等半天？[/quote] 这个得看你逻辑了。。如果只是加载数据，你可以判断加载了多少页，一次行返回所有加载的数据，不需要一次一次的来加载 加不同的hash为为了区别进行了哪种操作。。如果是不同的操作，你肯定要一个个来还原状态

[未知数]

引用 7 楼 xiceblue 的回复:

[quote=引用 5 楼 wzs_xyz 的回复:] 后退也并非一定没法处理， 可以试试 hash屏蔽后退的 setTimeout(function(){for(var i=0;i<10;i++)window.location.href = "#"+i;},10);

能具体点吗？我用history的新api，替换了列表页的url，也不行。。。[/quote] 这还不具体？ 把字段代码放页面底部试试不就明白了，经测试在火狐谷歌ie下都有效果，不过移动端没试

[-xice-]

引用 9 楼 wzs_xyz 的回复:

[quote=引用 7 楼 xiceblue 的回复:] [quote=引用 5 楼 wzs_xyz 的回复:] 后退也并非一定没法处理， 可以试试 hash屏蔽后退的 setTimeout(function(){for(var i=0;i<10;i++)window.location.href = "#"+i;},10);

能具体点吗？我用history的新api，替换了列表页的url，也不行。。。[/quote] 这还不具体？ 把字段代码放页面底部试试不就明白了，经测试在火狐谷歌ie下都有效果，不过移动端没试[/quote] 这样想从列表页后退出去的话，会疯的。。。

[-xice-]

引用 8 楼 showbo 的回复:

[quote=引用 6 楼 xiceblue 的回复:] [quote=引用 4 楼 showbo 的回复:] firefox12回退可以js动态生成的内容，ie和chrome不行，但是可以执行内嵌的js代码，你可以在页面用js添加内容的时候同时修改这个页面的hash，当转向到其他页面时，在回退时会回退到有hash的页面，依据hash值执行你需要的操作 1.html

<input type="button" value="添加当前时间到页面"  onclick="setBody()"/><br />
<input type="button" value="添加ABC到页面"  onclick="setBody('abc')"/><br />
<a href="2.html">2.html</a>
<script>
    var ff = navigator.userAgent.indexOf('Firefox') != -1;

    function setBody(html) {
        document.body.innerHTML += '<br>' + (html || new Date().toLocaleString());
        var hk = html ? ',abc,' : ',date,';
        if (location.hash.indexOf(hk) == -1) location.hash += hk;
    }
    if (!ff) { //由于firefox回退能保存js动态生成内容，所以不对firefox执行hash判断
        var hash = location.hash;
        if (hash.indexOf('date') != -1) //hash中包含添加时间动作，则执行下操作
            setBody();
        if (hash.indexOf('abc') != -1)//hash中包含添加abc动作，则执行下操作
            setBody('abc');
    }
</script>

2.html

<a href="javascript:history.back()">back</a>

那么当用户已经加载了十多页后，后退回来岂不是得等半天？[/quote] 这个得看你逻辑了。。如果只是加载数据，你可以判断加载了多少页，一次行返回所有加载的数据，不需要一次一次的来加载 加不同的hash为为了区别进行了哪种操作。。如果是不同的操作，你肯定要一个个来还原状态[/quote] 我在window的onpopstate事件里，看到浏览器操作的历史window对象，这个可以直接操作吗？ 还原原页面的操作，很麻烦，而且效果不会好，业务出点变化就坑爹了。