如何在PhantomJS和CasperJS中设置sessionStorage？

Question

使用以下脚本未正确设置sessionStorage。 我试图在page.evaluate回调中设置存储，但是我没有运气，我的“完成”检查无休止地循环。 我在使用Casper时遇到了同样的问题，尝试使用类似的评估和重新加载模式。 我无法测试，因为所有ajax请求都使用sessionStorage来获取授权JWT。 我知道我应该可以访问评估窗口，所以我不确定为什么它不起作用。

var page = require("webpage").create();
var url = "http://xxxxxxxx.com";
var t0 = Date.now;
function onPageReady() {
    var t1 = Date.now;
    var elapsed = t1 - t0; 
    var htmlContent = page.evaluate(function () {
        return document.documentElement.outerHTML;
    }); 
    console.log(htmlContent);
    console.log("ELAPSED TIME: " , elapsed + "\n") ;
    phantom.exit(0);
}

page.open(url, function (status) {
    var sessionStorage = page.evaluate(function(){
      sessionStorage.setItem('authorization','xxxxxxxxxxxxxxxxx');
      //window.sessionStorage.setItem('authorization','xxxxxxxxxx');
      window.sessionStorage.setItem('_USER','value');
      window.sessionStorage.setItem('USERNAME','value');
      window.sessionStorage.setItem('INTERNAL','value');
      console.log(window.sessionStorage);
      return sessionStorage;
    }); 
    t0 = Date.now;
    console.log(JSON.stringify(sessionStorage));
    console.log(JSON.stringify(window.sessionStorage));
    function checkReadyState() {
        setTimeout(function () {
            var readyState = page.evaluate(function () {
                return document.readyState;
            }); 

            if ("complete" === readyState) {
              // checking if my ng-repeat has loaded
              if (document.getElementsByClassName('quoteTr').length > 1){ 
                  console.log("ready!")
                  onPageReady();
              } else {
                  console.log("script not complete")
                  checkReadyState();
              }   
            } else {
                checkReadyState();
            }   
        }); 
    }   

    checkReadyState();
});

Answer 1

如果要在页面上下文内部（在page.evaluate() ）设置sessionStorage ，则需要在页面上下文中检索它。 虽然sessionStorage存在于页面上下文之外，但它是一个虚拟对象，无法访问页面的sessionStorage 。

page.evaluate(function(){
    sessionStorage.setItem('authorization','xxxxxxxxxxxxxxxxx');
});
var authorization = page.evaluate(function(){
    sessionStorage.getItem('authorization');
});
console.log("authorization: " + authorization);

由于sessionStorage是非原始对象，因此您不能在页面上下文之外传递它。 您只能传递它的表示形式，例如其键值对。 对于文档 ：

注意：参数和evaluate函数的返回值必须是一个简单的原始对象。 经验法则：如果可以通过JSON序列化，那就很好。

闭包功能，DOM节点等等都不行！

在CasperJS中也是如此。

---

关于“循环”的主题。 我发现您的代码存在三个问题。

First Date.now是对函数的引用。 如果需要当前时间，则必须将其称为Date.now() 。

您没有给PhantomJS太多时间来做任何工作。 本质上，您在使用setTimeout()没有第二个参数，该参数默认为0，这意味着立即调用回调。 尝试使用较小的超时值，例如50： setTimeout(function(){...}, 50) 。

您正在尝试在页面上下文之外访问document.getElementsByClassName('quoteTr') ，但是document只是一个虚拟对象，因此无论页面上发生什么，它都将始终返回一个空数组。 您必须使用page.evaluate() 。 CasperJS为这种情况提供了casper.exists()函数。

---

我尚未完全理解为什么需要设置一些sessionStorage值，但是如果需要尽快为页面设置它们，则可以尝试采用两种不同的策略：

• 正常打开页面，将值设置为sessionStorage ，然后再次加载页面，以便页面的JavaScript提取这些值。

• 您可以尝试注册到page.onLoadStarted ， page.onNavigationRequested或page.onUrlChanged事件，以便尽快设置会话值。