How to use localStorage?

I need to connect localStorage to remember the user's actions.
But I get an error
Uncaught DOMException: Failed to read the 'localStorage' property from 'Window': The document is sandboxed and lacks the 'allow-same-origin' flag.
We can bypass or add allow-same-origin?

[jaros1]

See ZeroFrame API
https://zeronet.readthedocs.io/en/latest/site_development/zeroframe_api_reference/#wrappergetlocalstorage
https://zeronet.readthedocs.io/en/latest/site_development/zeroframe_api_reference/#wrappersetlocalstorage-data

Can I ask for help, maybe I'm wrong.
A code that changes the style of the site and remembers the user's actions.

'use strict';
// create <link rel="stylesheet" href="light|dark.css">
let head = document.head,
    link = document.createElement('link');
link.rel = 'stylesheet';
// check the value from localStorage
if (localStorage.getItem('themeStyle') === 'dark') {
  link.href = 'css/dark.css'; // link to a dark style
  document.getElementById('switch-1').setAttribute('checked', true); // switch the checkbox to the "dark theme"
}
// default light theme
else {
  link.href = 'css/light.css'; // link to light style
}
head.appendChild(link); // insert the <link rel="stylesheet" href="light|dark.css"> into the header of the page between the head

// event when switching checkbox
document.getElementById('switch-1').addEventListener('change', ev => {
  let btn = ev.target;
  // if the checkbox is enabled
  if (btn.checked) {
    link.href = 'css/dark.css'; // turn off the dark theme
    localStorage.setItem('themeStyle', 'dark'); // write the value in localStorage
  }
  else {
    link.href = 'css/light.css'; // turn on the light theme
    localStorage.setItem('themeStyle', 'light'); // write the value in localStorage
  }
});

  <div class="switch">
    <input type="checkbox" id="switch-1" class="switch-check">
    <label for="switch-1" class="switch-label">
        Опция
        <span class="switch-slider switch-slider-on"></span>
        <span class="switch-slider switch-slider-off"></span>
    </label>
  </div>

  <script type="text/javascript" src="js/script.js?=version=1.0" charset="UTF-8"></script>

How do I properly use the API?

[jaros1]

I keep a copy of localStorage in a JS object:

var local_storage = {} ;
ZeroFrame.cmd("wrapperGetLocalStorage", [], function (res) {
var key ;
for (key in local_storage) if (!res.hasOwnProperty(key)) delete local_storage[key] ;
for (key in res) local_storage[key] = res[key] ;
}) ;

update local_storage as a normal object

save to ZeroFrame:
ZeroFrame.cmd("wrapperSetLocalStorage", [local_storage], function () {}) ;

the first error was gone, but there was another
Uncaught TypeError: ZeroFrame.cmd is not a function

[jaros1]

Do you have a ZeroFrame class in your JS code?
https://github.com/HelloZeroNet/ZeroTalk/blob/master/js/utils/ZeroFrame.coffee

There is no such file, but I can create.
Is it necessary?

[purplesyringa]

@datsec Yup, it's necessary.

I'm trying to use ZeroUP as a test, but I do not understand why it does not work.
I correctly point the way?
https://github.com/HelloZeroNet/ZeroUp/blob/master/js/all.js#L2189-L2344

[purplesyringa]

@datsec That code is compiled from CoffeeScript; you'd better copy ZeroFrame.js from https://github.com/HelloZeroNet/ZeroHello/blob/master/template-new/js/ZeroFrame.js and include it to index.html. Then:

var zeroFrame = new ZeroFrame();

var local_storage = {};
ZeroFrame.cmd("wrapperGetLocalStorage", [], function (res) {
    var key;
    for(key in local_storage) {
        if(!res.hasOwnProperty(key)) {
            delete local_storage[key] ;
        }
    }
    for(key in res) {
        local_storage[key] = res[key];
    }

    // put code which uses localstorage here
    // when you want to get from localstorage, use local_storage[key]
    // when you want to save to localstorage, use local_storage[key] = value; zeroFrame.cmd("wrapperSetLocalStorage", local_storage);
});

It is convenient for me to use the code that created CoffeeScript
Unfortunately, I still can not understand the API connections to my code.
I need a couple of examples to understand the principle of connection.
Can someone implement an example with the code that I threw off, with descriptions?
I need to add it here https://github.com/HelloZeroNet/ZeroUp/blob/master/js/all.js

I get different errors
Uncaught DOMException: Failed to read the 'localStorage' property from 'Window': The document is sandboxed and lacks the 'allow-same-origin' flag.

Uncaught TypeError: ZeroFrame.cmd is not a function

Uncaught ReferenceError: ZeroFrame is not defined

Uncaught SyntaxError: Unexpected identifier

Even when I just connect api LocalStorage, it still does not work as it should

[jaros1]

You cannot reference localStorage direct. Please use ZeroFrame.
I can see that Page is used instead of ZeroFrame in your all.js
Maybe the fix is:

var local_storage = {};
Page.cmd("wrapperGetLocalStorage", [], function (res) {
    var key;
    for(key in local_storage) {
        if(!res.hasOwnProperty(key)) {
            delete local_storage[key] ;
        }
    }
    for(key in res) {
        local_storage[key] = res[key];
    }

    // put code which uses localstorage here
    // when you want to get from localstorage, use local_storage[key]
    // when you want to save to localstorage, use local_storage[key] = value; 

   Page.cmd("wrapperSetLocalStorage", local_storage);
});

Can we add rules to the client?
If it's safe.
https://github.com/HelloZeroNet/ZeroNet/blob/master/src/Ui/template/wrapper.html#L63

sandbox="allow-same-origin allow-top-navigation allow-forms allow-scripts"

[purplesyringa]

It is unsafe. allow-same-origin allows you to escape iframe and do some bad things like shutdown ZeroNet/edit any zite/open ~infinity explorer.exe windows

@jaros1 Where should I install this code so that everything works?

@imachug I don't quite understand the principle of work.
For example, if I changed the source code from the sources.
How does he identify a fake zeronet from the present?