如何在URL查询字符串中存储程序状态？

12 浏览
0 Comments

如何在URL查询字符串中存储程序状态？

我如何读取和写入查询字符串？

var pageNumber = QueryString['pageNumber'];
var pageSize   = QueryString['pageSize'];
$('#next').click(function() { 
    QueryString['pageNumber'] = ++pageNumber;
    refresh(); 
});
function refresh() { /** 在这里获取数据并更新页面 **/ }

当然，这将允许用户复制和粘贴包含部分程序状态的URL。

是否有类似于上面使用的QueryString的API？

0

2 答案

0 Comments

问题出现的原因是更改查询字符串会导致页面重新加载。解决方法是使用片段标识符（“哈希路由”）或使用HTML5的history.pushState来编码客户端状态。pushState需要服务器端支持，通常采用通配符路由的形式。库如Director或Backbone Router提供了可以与任一技术一起使用的抽象。更新：在研究这个问题时，我不知道可以通过pushState来操作查询字符串（这是有道理的，因为它是URL的一部分）。正如这个演示的作者指出的那样，这允许在没有任何特殊服务器端支持的情况下使用pushState。

0
0 Comments

在浏览器中使用JavaScript可以通过Browse Object Model的window.location.search属性访问查询字符串。然而，对于解析查询字符串并没有很多原生支持。(参见也可以查看How can I get a specific parameter from location.search?)也许像下面这样可以做到吗？

var GET = {};
var queryString = window.location.search.replace(/^\?/, '');
queryString.split(/\&/).forEach(function(keyValuePair) {
    var paramName = keyValuePair.replace(/=.*$/, "");
    var paramValue = keyValuePair.replace(/^[^=]*\=/, "");
    GET[paramName] = paramValue;
});
var pageNumber = GET['pageNumber']?Number(GET['pageNumber']):0;
$('#next').click(function() { 
    GET['pageNumber'] = ++pageNumber;
    refresh(); 
});
function refresh() {
    var newQueryString = Object.keys(GET).reduce(function(keyValuePairs, paramName) {
        keyValuePairs.push(escape(paramName)+"="+escape(GET[paramName]));
        return keyValuePairs;
    }, []).join('&');
    window.location.search = "?"+newQueryString;
}

调用window.location.search会不会触发页面加载？

- 这取决于你对“调用”一词的理解。读取值不会触发页面加载；写入值会触发页面加载。如果你不希望触发页面加载，可以更改window.location.hash的值（对应于Fragment Identifier）。

0