so I have seen a lot of people using local storage to store certain parts of a web page but not an entire web page is it possible? , if so how? , if not is there a way to store an entire web pages data so the user can come back to it how they left it?
This can be done if you use javascript to save document.body.innerHTML into the webstorage and you use javascript to load it back from the storage when the page is loaded next time. If the web page is not in the webstorage, you could redirect the user to the web page.
But this depends on the design of your web page and if there is session index etc in the body of the web page.
You should also think of some way to handle versions. You dont want your users only use the cached version of your web page, but it should be updated once you update your web page.
The session storage is ~5mbit, so you cant save very much, especially not pictures.
Since LocalStorage allows you to store about 5MB~ you can store a full webpage there and then just call it into a document.write().
The following code does it:
Storing it:
var HTML = ""; //html of the page goes here
localStorage.setItem("content", HTML);
Retrieving it:
document.write(localStorage['content']);
Although this is possible it is common practice you only save settings and load them up into the right elements rather than the entire web page.
This is not really answering your question, but, if you are only curious how this can be done and don't need to have wide browser support, I suggest you look into Service Workers, as making websites offline is something that they solve very well.
One of their many capabilities is that they can act as a proxy for any request your website makes, and respond with locally saved data, instead of going to the server.
This allows you to write your application code exactly the same way as you would normally, with the exception of initializing the ServiceWorker (this is done only once)
https://developers.google.com/web/fundamentals/getting-started/primers/service-workers
https://jakearchibald.github.io/isserviceworkerready/
Local storage it's actually just an endpoint: has an IP address and can be accessed from the web.
First of all, you need to make sure that you're DNS service points on your Index page.
For example, if your Local-storage's ip is 10.10.10.10 and the files on that local-storage is organized like:
contants:
pages:
index.html
page2.html
images:
welcome.png
So you can point your DNS like:
10.10.10.10/index -> /contants/pages/index.html
In most of the web frameworks (web framework it's a library that provide built in tools that enable you to build your web site with more functionality and more easily) their is a built in module called 'route' that provide more functionality like this.
In that way, from you index.html file you can import the entire web site, for example:
and in your routes you define for example:
For all the files with the .html extension, route to -> 10.10.10.10/contants/pages/
For all the files with the .png/.jpg extension, route to -> 10.10.10.10/contants/images/
Local storage is usually for storing key and value pairs, storing a whole page will be a ridiculous idea. Try instead a Ajax call which Returns an partial view. Use that for the purpose of manipulation in DOM
Related
Team, We have implemented a single page application, where we are storing some data in root scope to access in other pages of an application. Everything works fine in normal flow. We hit the problem on browser refresh. When user in one of our application pages, if user refreshes the page, whole data is lost from root scope. We tried not allowing to refresh. But, we found that it is not possible and not even able add custom message to notify the user. Now, we are just logging out the user whenever he refresh the page, which is an awkward to user and that too our application doesn't need that much security. So, we are thinking to add whole root scope data in local storage on refreshing the page and after reloading the page, we would again load whole data from local/ session storage data to root scope. We have to do this at single place. So, we don't have to implement this at individual module page.
Is there a way to achieve this. Can any one please suggest if have an alternate way.
Be aware that HTML5 Local Storage only has 800kb-10mb depending on the browser. I heard Safari has 99 idk. 5mb in the latest Google Chrome (2/14/17).
Anyway, you can create a local storage by stringifying to JSON:
localStorage.setItem('myDataStorage', JSON.stringify(myData));
Then retrieve them
var myRetrievedData = JSON.parse(localStorage.getItem('myDataStorage'));
myDataStorage is the name of your created localStorage. You can use different names to create multiple localStorages if you would, just be aware that each one is limited only in size. Don't expect to save HD images much less videos using HTML local storage
That being done, your retrieved data can now be manipulated by your code using the variable myRetrievedData (or whatever variable name you want)
So I am creating an offline web app using appcache.
I need to pass a variable between client and server.
POST is not an option because the server could be offline and appcache will not pull from the cache with a POST request (Explicit or fallback)
GET is not an option because it cannot be cached by appcache because URL is different for each request (?id=n).
Added: I was looking for a way to adapt already created HTML forms (that use POST or GET) for offline use, so a way to store the actual request. Since I could not find a way around the appcache limitations, I ended up rewriting the code to use Indexeddb for storage and service worker fetch interception and background sync methods...much slicker...so long appcache.
According to https://developer.mozilla.org/en-US/docs/Web/HTML/Using_the_application_cache
Deprecated
This feature has been removed from the Web standards. Though some browsers may still support it, it is in the process of being dropped. Avoid using it and update existing code if possible; see the compatibility table at the bottom of this page to guide your decision. Be aware that this feature may cease to work at any time.
Try using sessionStorage.
Whenever you want to save data on a page you use the syntax
sessionStorage.setItem('name',value);
This saves the data offline
and can then be retrieved on any webpage using
sessionStorage.getItem('name');
This of course only saves the data till the tab is closed / session is ended.. A more permanent method is
localStorage
... They both use the same format but the latter stores the data even after the browser is closed.
I've seen several other questions on SO that are similar to this, but none of them are really what I'm looking for, so hopefully this won't be seen as a duplicate.
I have a client-side Javascript/HTML5 web application built with jQuery Mobile. I am finding that performance can be quite slow and it was suggested that having too much going on in the DOM could be the cause. My app does have several data-role="page" divs that could be bulking up the DOM in a single html page. I'm trying to split my app into several html pages to improve performance, but I want the experience to be seamless for the user. This means I will need to pass Javascript variables between the physical html pages within my app.
So far I've seen the following options in my searching:
Use a query string in the url going to the other pages. - I'm not sure I want my users seeing a what could be a rather large and confusing query string in the address bar.
Use server side code like ASP.Net or PHP to handle postback data. - I'm open to this, but I'm not really sure how it would work. I don't want to convert my html pages to aspx or php files. Could I have a simple server side script that could embed the postback data into a regular html file?
Use Cookies to store relevant data. - I'm not to sure of this one either because the majority of my users are in enterprise environments that may limit cookie usage.
Are there any other methods for accomplishing this? At this point, I'm leaning toward some sort of server side processing. If that is the best method, could someone point me in the right direction for figuring out how to do that?
Try out Local Storage or Session Storage http://www.w3schools.com/html/html5_webstorage.asp
Local Storage would be a way to go if you are HTML5 compliant. It will store values, reduce the calls to any server until you are actually ready to update all the info and the info will be present even when the browser is closed; use session storage or JS like this
window.onbeforeunload = function() {
localStorage.removeItem(key);
return '';
};
if you need to clear local storage of sensitive info on closing the browser.
Remember that anything you pass into local storage will come out as a string so you will need to convert it to the appropriate data type when you get the info out of storage.
You'll also be limited to storing 5 megs of data (I believe that is standard) but you probably have other issues if your form requires that much info. :)
Check these out for more info
http://msdn.microsoft.com/en-us/library/bg142799(v=vs.85).aspx
http://dev.w3.org/html5/webstorage/
You could use a POST instead of GET if you're only concern with the GET is the user seeing lengthy querystrings.
Use localStorage. localStorage lets you store values in the browser.
I want to create a page that "silently" queries other pages. It then crawls them for a result. When it's done querying all the pages, then it should calculate its own result according to the results retrieved.
What I meant with silent is,
the other web site's code shall not appear on my page, nor affect it in any way
I want each other page to be queried in a different session (like when I open a new tab for each in my browser) or something similar. So that there will be no namespace problems.
I heard chrome would offer something that might be helpful for that?
edit This is NOT about crawling web pages. It is for fetching data from other local stand-alone projects
edit2 I am just looking for an alternative to simply looping URLs and querieng them, because there are namespace issues
You can't access pages from other domains with JavaScript unless the domain explicitly allows your domain.
Typically you would use a server-side language for this, or better, use the website's public API. If they don't have a public API they probably wont appreciate you crawling their site.
I'm developing a PhoneGap application. If you don't know what that is, it's a service that allows you to build mobile-based applications using HTML, CSS and JavaScript.
I have an application, and I've come to a point where I need to transfer information from one page to another. The user chooses an option on the page, the application then loads a new page and based on their option it loads specific content.
Now I do already know a few ways of doing this, to name one.. local storage maybe. My question is, what is the most efficient way of getting information between these two pages? If this were PHP I'd simply using $_GET[''].. but it's not PHP, I'm looking for the best way to do this using HTML, CSS, and JavaScript.
Any help here would be highly appreciated!
There are several possibilities:
You are using a service like Phonegap:build or Cordova: You only gonna have one HTML-File where you continously hide and show the different pages. I don't recommend this one, but Phonegap:build and Cordova are great to create a package for all major phones, without headache.
URL-Parameters you could pass parameter over the URL to a different HTML-Page. This means you have to open all links with window.location.replace() or change the href-attribute on you anchors. In the next page you have to parse that URL, which is not as easy as in PHP.
localStorage / sessionStorage you can easily store data in the sessionStorage. With sessionStorage.myObject = JSON.stringify(complexObject) you can easily store complex objects to the session storage and read them back with var complexObject = JSON.parse(sessionStorage.myObject). Those are available during you complete session and would be one of the easiest solutions so far.