从主屏幕重新打开支持ios Web应用程序的页面时，方法会保留新的dom元素

Question

I've made html web page using jquery to add and change elements in the dom.

I'm using this meta tag to open the page full screen when launched from home screen. To emulate a basic app like experience.

<meta name="apple-mobile-web-app-capable" content="yes">

I've used manifest files before when creating a web-app-capable page to store files on the device, but these are files that cant be updated right?

My page is javascript based, i'm intrigued if there is way that I can store the page dom contents somehow. Idea being is that when the web page is re-opened from the home screen or home button double click method, it shows the last state page contents, rather that reloading the page from scratch.

Can this be achieved using a cookie or something?

Any ideas or pointers would be great thanks.

Answer 1

I ended up using local storage.

var data = localStorage.getItem('my_data');

// for testing
alert(data);

set_data = function() {

  data = localStorage.setItem('my_data', 'whatever');

  // for testing
  alert(localStorage.getItem('my_data'));

}

delete_data = function() {

  data = localStorage.clear();

  // for testing
  alert(localStorage.getItem('my_data'));

}

See working jsfiddle https://jsfiddle.net/joshmoto/j2y8o6rq/