PhantomJS- open page with LocalStorage by default

Question

I'm using PhantomJS to get the generated source of a web page after JavaScript DOM manipulations have taken place. This web page has JUST a <body> and nothing else.

Important: This web page uses browser's localStorage to generate the page.

I want to change LocalStorage in PhantomJS before opening the page.

App.js:

var page = require('webpage').create();

page.open("https://sample.com")
setTimeout(function(){
    // Where you want to save it    
    page.render("screenshoot.png")  
    // You can access its content using jQuery
    var fbcomments = page.evaluate(function(){
        return $("body").contents().find(".content") 
    }) 
    phantom.exit();
}, 1000)

You can set some `localStorage` property inside of `page.evaluate()`. Have you tried it? What's the issue? — Artjom B., Feb 08 '16 at 10:56
@ArtjomB. thanks for edit and comment. My issue is set localstorage for browser before **page.open(url)** — , Feb 08 '16 at 13:04
How can you set localStorage for a page you have not visited yet? — epascarello, Feb 08 '16 at 13:50
@epascarello I am trying this to set localStorage for a page before open. — , Feb 08 '16 at 14:51
But how can you set something before you visit the page? You need to load up that domain once, set the storage. — epascarello, Feb 08 '16 at 16:30

score 8 · Accepted Answer · answered Feb 08 '16 at 13:39

localStorage for a particular domain is only available when you open a page on that domain. You can

open some URL on the domain you're interested in,
change localStorage according to your needs,
open your target URL on the same domain.

This can look like this:

page.open("https://sample.com/asdfasdf", function(){
    page.evaluate(function(){
        localStorage.setItem("something", "whatever");
    });

    page.open("https://sample.com", function(){
        setTimeout(function(){
            // Where you want to save it    
            page.render("screenshoot.png")  
            // You can access its content using jQuery
            var fbcomments = page.evaluate(function(){
                return $("body").contents().find(".content") 
            }) 
            phantom.exit();
        },1000)
    });    
});

It's also possible not to open a full page in step 1. You can also use dummy page with some URL.

page.setContent("", "https://sample.com"); // doesn't actually open any page

page.evaluate(function(){
    localStorage.setItem("something", "whatever");
});

page.open("https://sample.com", function(){
    setTimeout(function(){
        // Where you want to save it    
        page.render("screenshoot.png")  
        // You can access its content using jQuery
        var fbcomments = page.evaluate(function(){
            return $("body").contents().find(".content") 
        }) 
        phantom.exit();
    }, 1000)
});

score 0 · Answer 2 · 2016-02-09T07:40:01.757

I solved my problem with Friend's Help. My solution is:

Notice: I set Timeout 10000(10 seconds) for complete load page.

var page = require('webpage').create();

page.open("https://sample.com", function(){
    page.evaluate(function(){
        var i = 0,
        oJson = jsonData,
        sKey;
        localStorage.clear();

        for (; sKey = Object.keys(oJson)[i]; i++) {
            localStorage.setItem(sKey,oJson[sKey])
        }
    });

    page.open("https://sample.com", function(){
        setTimeout(function(){
         page.render("screenshoot.png") 
            // Where you want to save it    
           console.log(page.content); //page source
            // You can access its content using jQuery
            var fbcomments = page.evaluate(function(){
                return $("body").contents().find(".content") 
            }) 
            phantom.exit();
        },10000)
    });    
});

PhantomJS- open page with LocalStorage by default

2 Answers2

Linked