Menu
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>
792
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);
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
