MIT app does not work if I use localStorage.getItem('name')?

Tested now:

image

<!DOCTYPE html>
<html>
<body>
<p>Test Local Storage</p>

<script>
// Check browser support
if (window.localStorage){
   alert('localStorage is supported');
} else {
   alert('localStorage is NOT supported');
}
</script>

</body>
</html>

Thanks!
So Javascript localStorage code is not working in Webviewer .... OMG.
Maybe I need to use another way such as cache?
I just want to save username and score data into webbroswer....

I tried custom webview as well, doesn't work there either.

OMG.....Thank you for confirmation.
Can I ask about TinyDB? I have never used it.
Can it be used from Javascript?
I mean if it has code to access from javascript, maybe I can delete localStorage code, instead I can add some other code to use TinyDB? Is it possible?

We need to take a couple of steps back.....

This website of yours, will it only be used by users running your app, or will it also be used by users accessing from their computer browser or mobile browser ?

Yes, it will only be used by users running my app.
The website has authorization, so only limited users.

OK good.

You can use the webviewstring to transfer the username to the app. You will need to add some code to your javascript to set the webviewstring when the username is entered (no doubt you have a button event listener already from attempting localStorage)

You can then save the captured username in your app using tinyDB for later use, e.g. to pass the username back to the web page, also using the webviewstring.

Mmmmm,thanks.
So you mean in my javascript, if user name was input, then webviewer event becomes a trigger and it saved in TinyDB?
Do you know a specific example which I can refer to how to do it?

If I get time, I will work up an example for you.

1 Like

Here is a self contained example, using a local html file.

Click button to open web page.
Enter username.
Username is passed to the webviewstring and saved to the tinydb on pressing the Submit button
Open the web page again, and the saved username is returned to the web page
Click the Clear Username button to remove the username from the tinydb, and variables and reset the web page

SaveAndReturnUserName.aia (3.1 KB)

BLOCKS

HTML
<!DOCTYPE html>
<html>
<meta name=“viewport” content=“width=device-width, initial-scale=1.0”>

<head>
	<title>Username</title>
	
</head>

<body>

  <div class="container"><br>
    <label for="uname"><b>Username</b></label><br><br>
    <input id = "inputusername" type="text" placeholder="Enter Username" ><br><br>
    <button id="submitButton" onclick="getUserName()" >Submit</button><br>
    
  </div>	
	
</body>

<script>

var username = window.AppInventor.getWebViewString();

if (username !="") {
	document.getElementById("inputusername").value = username;
	document.getElementById("submitButton").style.visibility = "hidden";
} else {
	document.getElementById("submitButton").style.visibility = "visible";
}

function getUserName() {
	window.AppInventor.setWebViewString(document.getElementById("inputusername").value);
	document.getElementById("submitButton").style.visibility = "hidden";

}

</script>

</html>
1 Like

Thank you so much for your support.
This code is very new to me but I will try to understand and I will challenge it! :laughing: :grinning:

TIMAI2 san
I need your advice.
In my webpage, in javascript code, I just want to save usename into TinyDB.

var username="ABCD"

How can I save it?

window.AppInventor.setWebViewString(username);

Is this code used to save name inside TinyDB?

Yes, that will get it on the JavaScript side, in you app you need to get that value and save to tinydb.

Thank you.
In this case, do I need to change the below block code?

This would be sufficient to just save the value to a tinydb tag

image

You can call the tag value back later by using:

image

Thank you so much.
I find some error when loading html.

Uncaught (in promise) TypeError: window.AppInventor is undefined

Do I need some definition ( add some in html ?) to use window.AppInventor.getWebViewString(); ?

I am not seeing the same problem, with these blocks and html:

image

<!DOCTYPE html>
<html>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

<head>
	<title>Username</title>
</head>

<body>
  <div class="container"><br>
    <label for="uname"><b>Username</b></label><br><br>
    <input id = "inputusername" type="text" placeholder="Enter Username" ><br><br>
    <button id="submitButton" onclick="getUserName()" >Submit</button><br>
  </div>	
</body>

<script>
function getUserName() {
	var username = document.getElementById("inputusername").value;
	window.AppInventor.setWebViewString(username);
}
</script>
</html>

Can you check this?

https://jsfiddle.net/kc5ve80u/

AppInventor has some errors.

Do you know why?