I'm new to JavaScript and web development. I'm practicing by making a to-do list application. I was wondering how I would go about saving the content of the list that was created into the browser. Right now if I refresh my page or exist the browser it will delete everything. I want to prevent that.
Even that this is a broad question I'll try to help you be asking you to try to use HTML5 web storage.
You can store for example easily in locaStorage any data you want.
You can learn more here http://www.w3schools.com/html/html5_webstorage.asp
It's also quite easy with JS:
// Store
localStorage.myValue = "Text";
// Retrieve
var myValue = localStorage.getItem('myValue');
// Delete
localStorage.removeItem('myValue');
You'll need localStorage to do that.
An example of an application you're working using localStorage can be found here
How to use local storage for JavaScript
You can learn more about localStorage at Mozilla Developer Network
Related
Can anyone point me in the right direction? I'm building a landing page that is supposed to store the current page URL with query strings to local storage. I've looked all over, but can't find a solution that will keep my AMP page valid.
I know this is a 3 year old question, but what you're trying to accomplish is doable through the use of the amp-script component.
You can read up here:
https://amp.dev/documentation/components/amp-script/
Hope this helps somebody in the future.
Nowadays you can use for custom JS and access the localStorage, but as far as I know, you can't access the page URL directly.
Look at this compatibility table: https://github.com/ampproject/worker-dom/blob/main/web_compat_table.md
Document.location is marked as false.
I'm working in an AMP project that needed the current page URL. What I did was to save the URL as an attribute and use a custom JS to read from this attribute (my pages are rendered in the server, so I can add this info there).
This is not possible with AMP as you can't run custom Javascript. This means you won't be able to read from local storage either.
I'm using cordova for the first time to develop apps for android.
i have installed cordova local storage plugin.
But i don't know how to use it(what java-script code is to be used).
What i'm making is a To-do list app,so i need to store the strings or whatever the user inputs.
can anyone please post a short example demonstrating the same.
Thanks in advance.
You don't need localStorage plugin to use simple html localStorage.You can simply save and retrieve value without any plugin.
For saving:
localStorage.setItem("key",value);
for retrieving:
localStorage.getItem("key");
You can save upto 5mb per app with local storage.
You can use web sql too. WEB SQL example link It also does not need any plugin.
Then you can use a bit advanced SQL wrappers. This one needs plugin to be installed. Brodysoft SQLite with complete documentation
I am working on a small application but I am stuck on a problem. I want stored form element values on a HTML page when filled in on one browser(Ex. Firefox) and auto fill data when same page is loaded in another browser(Ex. Chrome). If anybody has any ideas please help me.
Unless clients can login and you're willing to share this data via your server, you can not change behavior of a different browser from your current, so in your example Firefox can not change a cookie, localstorage or whatever of Chrome. Browsers tend to only share information like cookies when they are first ran; such as with you the import wizard from Firefox.
I can think of two alternatives to achieve this:
An authentication system where the data is stored server-side.
Through custom browser extensions. You could create a custom browser extension that directly writes the data of the other browsers. This does require the user to install that extension though.
This link explain how to achieve that http://www.nczonline.net/blog/2010/09/07/learning-from-xauth-cross-domain-localstorage/
It's not simple, but it's the way that I know it can be done at the moment without the use of cookies.
I want to know how to show a recently visited pages' list with only html and javascript code.
I have a website. It has 100 html files and one html (index.html) for the home page, the others (1.html, 2.html ... 99.html) are sub pages. I want to show a recently visited pages block on my home page. I am trying to not to use php, asp or any other server side languages. Is there any way to do it? Thanks.
Edit1: Thank you for your replies. But it seems I did not make myself clear.
I want all visitors see the list, and the list will not only show pages that he/she has just visited, but all the recent pages that have been visited by any visitor.
I would look into using HTML5 Local Storage
It's essentially a DBMS stored right on the user's browser. Of course, it's not supported in IE < 8, so if universal cross-browser support is a requirement, this might not work for you.
Save a cookie on the user's computer. Generally, you have something like this (pseudocode):
read cookie
parse cookie
add current page to list (and probably delete old items)
save cookie
create list from data
Its possible to use javascript local storage or css a:visited if you want to create that list for just one user: the viewing user.
You cant share the list with other users.
Try tjis with the javascript history object. Check the link below. With the history object you can access the recently viewed pages and manipulate them. But if the user clears the cache then the data is lost.
http://www.javascriptkit.com/jsref/history.shtml
You could use cookies to store which pages a user has visited already.
http://jquery-howto.blogspot.com/2010/09/jquery-cookies-getsetdelete-plugin.html
This question already has answers here:
Persist variables between page loads
(4 answers)
Closed 7 years ago.
Is it possible to keep my (global) variables when the page is reloaded? If yes, how?
Thanks for any help.
Best regards.
Try this cookie-less javascript function.
It basically store your data in the window.name property which does not clear the value when you reload the page or goes to another site.
You can persist data across page reloads via something like window.localStorage, window.sessionStorage (proprietary Mozilla extension) or database abstraction (window.openDatabase) provided by some of the WebKit -based browsers. See this article on MDC for a nice overview of Storage interfaces and this WebKit article on their database introduction.
In the same style you can store string values in the hash key.
Using the property:
window.location.hash = 'flight/105';
Then when refreshing the page you initialize back your variables.
The JavaScript environment will be reset when the browser leaves your page. However, you could register an onUnload handler to serialise your array to a cookie, then check for this every time the page is loaded and unserialise it if present.
Does your browser have a reset button, or do you mean the reload button?
When the page loads, everything is loaded fresh. There is nothing left from any previous page. The only place to store anything that survives loading a page is in a cookie.
Note that the amount of data that you can put in cookies is limited to a few kilobytes per site. The exact limit varies from browser to browser, but you can't expect to be able to put more than perhaps a kilobyte or two worth of data in cookies.
Are you talking about Cookies? If so you might want to review this open-source module
This will easily allow you to store cookies, that is data, even after a browser reload click. This makes doing it really easy and it is what I use.
var cookie = new HTTP.Cookies();
cookie.write('mydata', 'myvalue', '+1y');
//later on you can get that data EVEN AFTER a reload
var x = cookie.read('mydata');
You probably shouldn't try to make a cookies implementation from scratch though because it is very painful and you have to do a lot of testing across web browsers, such as to make sure Internet Explorer works.