Question

如何阅读并编写到查询字符串？

var pageNumber = QueryString['pageNumber'];
var pageSize   = QueryString['pageSize'];

$('#next').click(function() { 
    QueryString['pageNumber'] = ++pageNumber;
    refresh(); 
});

function refresh() { /** get data and update page here **/ }

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

是否有与QueryString类似的API（上面使用过）？

Answer 1

正如Richard所说，通过分配window.location.search来更改查询字符串将触发页面重新加载。

出于这个原因，通常的做法是在片段标识符中编码客户端状态（“散列路由”，与旧版浏览器兼容）或使用history.pushState（HTML5的一部分）操纵路径）。 pushState需要服务器端支持，通常采用通配符路由的形式。

Director或Backbone Router等图书馆提供了适用于这两种技术的抽象。

<强>更新在研究这个答案之前我不知道这个，但是可以通过pushState来操作查询字符串（这是有意义的，因为它是URL的一部分）。正如this demo的作者指出的那样，这允许在没有任何特殊服务器端支持的情况下使用pushState。

Answer 2

浏览器中的JavaScript可以使用Browse Object Model的window.location.search属性访问查询字符串。虽然解析该查询字符串没有很多本机支持。（另见How can I get a specific parameter from location.search?）

也许这样的事情可以吗？

var GET = {}; // I've taken the liberty of re-naming your `QueryString` object
              // to just `GET`, kind of in the style of PHP.
              // Mostly because I find it confusing to refer to something which
              // is not a string (it is an object/map) as a string.
var queryString = window.location.search.replace(/^\?/, ''); // but this: *this* is a string!
queryString.split(/\&/).forEach(function(keyValuePair) {
    var paramName = keyValuePair.replace(/=.*$/, ""); // some decoding is probably necessary
    var paramValue = keyValuePair.replace(/^[^=]*\=/, ""); // some decoding is probably necessary
    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;
}

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

2 个答案: