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

Hello, I use javascript code (localStorage)in my web site to save input name in the browser.

var loadname = localStorage.getItem('savename');

But when I converted in apk with Webviewer , it does not work.

Could you give some recommendation to solve the issue?

Please show an example of how you are using local storage in your app

You can test with this html:

<!DOCTYPE html>
<html>
<body>

<div id="result"></div>

<script>
// Check browser support
if (typeof(Storage) !== "undefined") {
  // Store
  localStorage.setItem("lastname", "Smith");
  // Retrieve
  document.getElementById("result").innerHTML = localStorage.getItem("lastname");
} else {
  document.getElementById("result").innerHTML = "Sorry, your browser does not support Web Storage...";
}
</script>

</body>
</html>

TIMAI2 san
Thank you for your info.
I just use like below.

 localStorage.setItem("savename", username); //save user name

And in the website, first read the username like below.

   var loadname = localStorage.getItem('savename');
      namae = loadname;

I wonder MIT App Inventor can convert such a website with using localStorage javascript?

TIMAI2 san
I just upload your html and convert apk with MIT App Inventor (using web viewer) and
installed apk in the smart phone but there is nothing showed on the screen.
I doubt localStorage code is not working in MIT app inventor.

I have not had a chance to test this in the webviewer, but I believe you are correct. You could go out to the device's native browser (Chrome/Firefox/etc.) and try there....

An alternative may be to try something with the webviewstring, but this would only apply to your app, and not a general website, so you would need to provide options in your javascript for how the site is being used.

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?