Geek Answers Handbook

WinForms CefSharp LocalStorage web browser does not work

I am trying to use CefSharp browser control in a WinForms application along with the LocalStorage mechanism.
The problem is that the browser control in the application changes to LocalStorage, does not affect other browser windows, and it does not receive changes from other Chrome browser windows.
HTML runs inside the built-in Chrome browser and modifies localstorage and receives notification of changes.
What am I missing?

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>
+5
source share
1 answer

If you did not set the cache location path in the CefSharp.CefSettings object and passed it to the Cef.Initialize() method, each time your application starts, the browser will create a new cache instance that will be discarded when your application exits.

The cache instance also contains your localStorage data, as well as any cookies (you might want to keep the user subscription?) And other things.

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

The minimum solution is to simply add this to your application launch procedure, for example, in Program.Main or, in your case, the constructor of the Form1 class:

 var settings = new CefSharp.CefSettings { CachePath = "cache" }; CefSharp.Cef.Initialize(settings);
+2
source

More articles:


All Articles