WinForms CefSharp Browser LocalStorage not working

8.1k views Asked by At

I'm trying to use CefSharp browser control at WinForms application along with the LocalStorage mechanism.
The problem is that the browser control in the application changes to LocalStorage don't affect other browser windows and it doesn't get changes from other chrome browser windows.
The HTML works inside native chrome browser and changes localstorage and get changes notifications.
What do I miss?

C# Code:

    public Form1()
    {
        InitializeComponent();

        CefSharp.Cef.Initialize();

        _browser = new ChromiumWebBrowser(URL_TO_LOAD);
        _browser.BrowserSettings = new CefSharp.BrowserSettings()
        {
            ApplicationCacheDisabled = false,
            FileAccessFromFileUrlsAllowed = true,
            JavascriptDisabled = false,
            LocalStorageDisabled = false,
            WebSecurityDisabled = true,
            JavaScriptOpenWindowsDisabled = false,
            JavascriptDomPasteDisabled = false
        };
        _browser.Load(URL_TO_LOAD);

        splitContainer1.Panel1.Controls.Add(_browser);
    }

HTML:

 <!DOCTYPE html>
 <html lang="en">
 <head>
      <meta charset="utf-8"/>
      <meta name="viewport" content="width=620"/>
      <title>HTML5 Demo: Storage Events</title>
 </head>
<body>
    <div>
        <p>
            <label for="data">Your test data:</label> <input type="text"
                name="data" value="" placeholder="change me" id="data" /> 
        </p>
        <p id="fromEvent">Waiting for data via<code>storage</code>event...
        </p>
    </div>
    <SCRIPT type="text/javascript">
    var addEvent = (function () {
          if (document.addEventListener) {
            return function (el, type, fn) {
              if (el && el.nodeName || el === window) {
                el.addEventListener(type, fn, false);
              } else if (el && el.length) {
                for (var i = 0; i < el.length; i++) {
                  addEvent(el[i], type, fn);
                }
              }
            };
          } else {
            return function (el, type, fn) {
              if (el && el.nodeName || el === window) {
                el.attachEvent('on' + type, function () { return fn.call(el, window.event); });
              } else if (el && el.length) {
                for (var i = 0; i < el.length; i++) {
                  addEvent(el[i], type, fn);
                }
              }
            };
          }
        })();
    </SCRIPT>
    <script>
        alert("localStorage: " + localStorage);

        var dataInput = document.getElementById('data'), output = document
                .getElementById('fromEvent');
        addEvent(window, 'storage', function(event) {
            alert('change notification');
            if (event.key == 'storage-event-test') {
                output.innerHTML = event.newValue;
            }
        });
        addEvent(dataInput, 'keyup', function() {
            localStorage.setItem('storage-event-test', this.value);
        });

        var curStorageVal = localStorage.getItem('storage-event-test');
        if(curStorageVal != null && curStorageVal != '')
        {
            output.innerHTML = curStorageVal;
        }
    </script>


</body>
</html>  
2

There are 2 answers

0
Digvijay Singh On

1.Get these from NuGet package manager :
using CefSharp; using CefSharp.WinForms;

2.Create instance for you CefSetting :
CefSettings settings = new CefSettings(); settings.CachePath = @"C:\localstorage";

enter image description here

0
Anders Marzi Tornblad On

Unless you set a path for the cache location in a CefSharp.CefSettings object and pass it to the Cef.Initialize() method, every time your app is started, the browser(s) will create a new cache instance, which will be discarded when your app exits.

The cache instance also holds your localStorage data, as well as any cookies (you might want to keep a user signed in?) and other things as well.

I had the same problem, but found a solution here: https://github.com/cefsharp/CefSharp/blob/v39.0.2/CefSharp.Example/CefExample.cs#L30-L32

One minimal solution is to add this to your application's startup procedure, like in your Program.Main or in your case, your Form1 class's constructor:

var settings = new CefSharp.CefSettings
{
    CachePath = "cache"
};

CefSharp.Cef.Initialize(settings);