Problems with Local Storage Manager

Wappler Version : 3.2.1
Operating System : OS X 10.15.6

Expected behavior

What do you think should happen?
After adding the Local Storage component, web page should open without errors.

What actually happens?
I see the error in the console and page (frontend and editor) is blank, as soon as I remove the component, everything works fine.

Uncaught SyntaxError: Unexpected token u in JSON at position 0
    at JSON.parse (<anonymous>)
    at localManager.js:28
    at Array.reduce (<anonymous>)
    at n.getData (localManager.js:26)
    at n.render (localManager.js:22)
    at n.constructor (BaseComponent.js:20)
    at n (appConnect.js:488)
    at n.e.hasOwnProperty.e.constructor (appConnect.js:521)
    at new n (appConnect.js:488)
    at n.$addChild (BaseComponent.js:213)


report_2020-8-2_17-37-15.zip (221.0 KB)

Can you please paste the whole page code when you add the local storage component / when this error appears?

Sure

    <!doctype html>
<html is="dmx-app">

<head>
	<meta name="ac:route" content="/:page/:qr?">
	<base href="/">
	<script src="dmxAppConnect/dmxAppConnect.js"></script>
	<meta charset="UTF-8">
	<title>Untitled Document</title>
	<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous" />
	<script src="js/jquery-3.4.1.slim.min.js"></script>
	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
	<link rel="stylesheet" href="bootstrap/4/css/bootstrap.min.css" />
	<script src="dmxAppConnect/dmxBrowser/dmxBrowser.js" defer=""></script>
	<script src="dmxAppConnect/dmxFormatter/dmxFormatter.js" defer=""></script>
	<script src="dmxAppConnect/dmxBootstrap4Navigation/dmxBootstrap4Navigation.js" defer=""></script>
	<script src="dmxAppConnect/dmxStateManagement/dmxStateManagement.js" defer=""></script>
	<link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Pacifico" />
	<link rel="stylesheet" href="css/style.css" />
	<script src="dmxAppConnect/dmxLazyLoad/dmxLazyLoad.js" defer=""></script>
	<script src="dmxAppConnect/dmxLazyLoad/lazysizes.min.js" defer=""></script>
</head>

<body id="qrpage" style="background:#f2f2f2;">
<dmx-local-manager id="local1"></dmx-local-manager>

	<dmx-serverconnect id="getqrcode" url="api/getqrcode" dmx-param:page="query.page" dmx-on:success="session1.set('donate',getqrcode.data.api1.data)"></dmx-serverconnect>




	<div is="dmx-browser" id="browser1"></div>
	<dmx-serverconnect id="serverconnect1" url="api/qrcode" dmx-param:page="query.page"></dmx-serverconnect>
	<section class="container-fluid mt-auto mb-auto">

		<div class="container mb-0">
			<div class="row align-items-center justify-content-center mt-5 mb-0">
				<div class="col-3 ml-0">
					<img dmx-bind:src="serverconnect1.data.page.userpic" class="img-fluid rounded" width="60" height="60">
				</div>


			</div>
			<div class="row justify-content-center mt-0 mb-1 pt-0">
				<div class="mt-3 col-9 text-center">
					<h4 class="font-weight-bolder">Hey, I'm {{serverconnect1.data.page.username}}</h4>


				</div>
			</div>
			<div class="row row-cols-7 justify-content-center align-items-center w-auto mt-4">
				<div class="justify-content-center text-center align-self-center offset-0 rounded border-white rounded-lg bg-transparent col-12 mt-n4 pt-0 pb-0 pl-0 pr-0" id="qrcode">

					<p dmx-html="getqrcode.data.api1.data">

					</p>
				</div>
			</div>
			<div class="row align-items-center justify-content-center no-gutters text-center mt-0">
				<div class="col">
					<button id="btn1" class="btn btn-dark text-center btn-sm pt-2 pb-2">;<i class="fa fa-heart"></i></button>
				</div>
			</div>

		</div>
		<div class="row text-center justify-content-center mt-4">
			<footer class="navbar-light container text-center">
				<nav class="navbar navbar-expand-lg navbar-light bg-transparent justify-content-center">
					<a class="navbar-brand w-auto ml-0 mr-0" href="#" style="font-size:28px;"></a>
				</nav>
			</footer>
		</div>




	</section>

	<script src="bootstrap/4/js/popper.min.js"></script>
	<script src="bootstrap/4/js/bootstrap.min.js"></script>
</body>

</html>

Exactly the same thing happens after adding and removing Session storage manager.
Wappler 3.2.2

@patrick will check this :slight_smile:

1 Like

Sorry for responding this late. The error message tells that it got an error when it tried to parse the data stored in the session/local storage. It is stored as a json serialized string and the is being parsed back when reading from it. Seems that in your case it contains invalid json.

I should probably do some better error handling. If you still have this error then please check the content of the local/session storage using devtools. In Chrome you find that under the Application tab. Alternative you can just type localStorage or sessionStorage in the console to inspect them. The data used by App Connect are stored under keys prefixed with dmxState-.

1 Like

Hey @patrick,
Thanks for the hint :slight_smile:

Have updated the plugin, it should now not throw an error, instead it now shows a warning in the console when it can’t parse the value stored in the storage and skip it.

dmxStateManagement.zip (1.3 KB)

1 Like

Thanks!

Fixed in Wappler 3.3.2

This topic was automatically closed after 31 hours. New replies are no longer allowed.