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

如何读取并将写入查询字符串？如何在URL查询字符串中存储程序状态？

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？

来源

2013-06-01 Landon Kuhn

以前从未见过'QueryString'对象，你从哪里得到它？ – Barmar

@Barmar - “是否有类似于QueryString的API（上面使用过）？”;我认为重点是OP没有看到那个对象，并且想要一个。 –

可能的重复[如何使用jQuery查询字符串对象插件 - 设置，空，删除方法不工作]（http://stackoverflow.com/questions/2906141/how-to-use-jquery-query-string-object- plugin-set-empty-remove-methods-not-wo） – Barmar

浏览器内JavaScript可以使用浏览对象模型的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; 
}

来源

2013-06-01 04:43:22

调用window.location.search是否不触发页面加载？ –

@ landon9720 - 这取决于你的意思是“打电话”。读取该值不会触发页面加载;写信给它。如果您不希望“window.location.hash”值（与[片段标识符]（http://en.wikipedia.org/wiki/Fragment_identifier）相对应）可以更改而不触发页面加载。 –

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

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

诸如Director或Backbone Router这样的库提供了可以使用任一种技术的抽象。

更新我不知道这一点，直到这个答案做研究，但有可能通过操纵pushState的（这使得考虑到它的URL的一部分意义上）的查询字符串。作为this demo的作者指出，这允许使用pushState而不需要任何特殊的服务器支持。

来源

2013-06-04 00:13:51

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

回答

相关问题