How to Access $localStorage in protractor tests gives WebDriverError

Question

I am trying to expect on localStorage values which I believe can be accessed from window object. but whenever I try to run the below code:

browser.executeScript(function () {
       console.log('window.localStorage:'+window.localStorage);
      });

I get the following error: - a Java Process opens a JVM execution and console shows this:

node_modules/selenium-webdriver/error.js:26
  constructor(opt_error) {
                         ^
    WebDriverError: {"errorMessage":"SecurityError: DOM Exception 18","request":{"headers":{"Accept-Encoding":"gzip,deflate","Connection":"Keep-Alive","Content-Length":"135",
"Content-Type":"application/json; charset=utf-8","Host":"localhost:41937","User-Agent":"Apache-HttpClient/4.5.1 (Java/1.7.0_79)"},"httpVersion":"1.1","method":"POST","post":"{\"script\":\"return (function () {\\n   console.log('window.localStorage:'+window.localStorage);\\n  }).apply(null, arguments);\",\"args\":[]}","url":"/execute","urlParsed":{"anchor":"","query":"","file":"execute","directory":"/","path":"/execute","relative":"/execute","port":"","host":"","password":"","user":"","userInfo":"","authority":"","protocol":"","source":"/execute","queryKey":{},"chunks":["execute"]},"urlOriginal":"/session/2d7fbb70-2bf0-11e6-8379-b56f27de83cd/execute"}}
Build info: version: '2.53.0', revision: '35ae25b', time: '2016-03-15 17:00:58'
System info: host: 'home', ip: '192.168.0.10', os.name: 'Mac OS X', os.arch: 'x86_64', os.version: '10.11.5', java.version: '1.7.0_79'
Driver info: driver.version: unknown
    at WebDriverError (/node_modules/selenium-webdriver/error.js:26:26)

Answer 1

The problem is that you are trying to print a storage type of object using your code.

   console.log('window.localStorage:'+window.localStorage);     

Instead what you could use is Properties or Methods with keys for the corresponding storage type to be displayed. e.g.

   console.log('window.localStorage.font:' + window.localStorage.getItem('font'));

Details over properties and methods of a storage are here in the document..

Answer 2

To get an item from local storage use window.localStorage.getItem() through executeScript():

var value = browser.executeScript("return window.localStorage.getItem('key');");
expect(value).toEqual(expectedValue);

We can also have this helper object/wrapper around the local storage for convenience:

"use strict";

var LocalStorage = function () {
    this.getValue = function (key) {
        return browser.executeScript("return window.localStorage.getItem('" + key + "');");
    };

    this.get = function () {
        browser.executeScript("return window.localStorage;");
    };

    this.clear = function () {
        browser.executeScript("return window.localStorage.clear();");
    };
};

module.exports = new LocalStorage();