title: Preventing pure HTML 5 mobile app from reseting when changing orientation in Android
body: <p><strong>I am developing a pure HTML 5 mobile app using jquery mobile and very less dependency on Android code apart from loading my main HTML file.</strong></p>
  
  <p>Following is my MainActivity code.</p>
  
  <pre><code>public class MainActivity extends Activity {
  
  @Override
  protected void onCreate(Bundle savedInstanceState) {
      super.onCreate(savedInstanceState);
      // setContentView(R.layout.activity_main);
      WebView webView = new WebView(this);
      WebSettings settings = webView.getSettings();
      // TO enable JS
      settings.setJavaScriptEnabled(true);
      // To enable Localstorage
      settings.setDomStorageEnabled(true);
  
  
      webView.loadUrl("file:///android_asset/main.html");
      setContentView(webView);
  }
  
  
  @Override
  public boolean onCreateOptionsMenu(Menu menu) {
      // Inflate the menu; this adds items to the action bar if it is present.
    //  getMenuInflater().inflate(R.menu.main, menu);
      return true;
  }
  </code></pre>
  
  <p>Following is my Mainifest file</p>
  
  <pre><code>&lt;?xml version="1.0" encoding="utf-8"?&gt;
  &lt;manifest xmlns:android="http://schemas.android.com/apk/res/android"
  package="com.example.android_playlist"
  android:versionCode="1"
  android:versionName="1.0" &gt;
  
  &lt;uses-permission android:name="android.permission.INTERNET"&gt;&lt;/uses-permission&gt;
  &lt;uses-sdk
      android:minSdkVersion="14"
      android:targetSdkVersion="18" /&gt;
  &lt;application
      android:allowBackup="true"
      android:icon="@drawable/ic_launcher"
      android:label="@string/app_name"
      android:theme="@style/AppTheme" &gt;
      &lt;activity
          android:name="com.example.android_playlist.MainActivity"
          android:label="@string/app_name" 
          android:configChanges="orientation|keyboard|keyboardHidden" 
          android:screenOrientation="sensor" &gt;
          &lt;intent-filter&gt;
              &lt;action android:name="android.intent.action.MAIN" /&gt;
              &lt;category android:name="android.intent.category.LAUNCHER" /&gt;
          &lt;/intent-filter&gt;
      &lt;/activity&gt;
  &lt;/application&gt;
  &lt;/manifest&gt;
  </code></pre>
  
  <p>As per the android documentation when the orientation is changed the Android re-loads the activity.
  In my case my single activity is a single HTML5 file which contains list of videos. Now when I am testing this on my Android mobile the page reloads itself when I change my orientation.
  I would like to avoid this. Can someone please suggest me a way to this. </p>
  
  <p><strong>Note: in my activity I am just loading this page and rest all code is at client side i.e. using jquery mobile so I am not sure how I will tell my Android to save my HTML5 page state.</strong></p>
  
  <p>Also, sometimes I noticed that when The app is crashes or if I hit the back button more than once to come out of the <strong>application my localStorage is getting clear.</strong></p>
  
  <p>I am using following syntax to store any item into localStorage.</p>
  
  <pre><code>localStorage.setItem() and localStorage.getItem()
  </code></pre>
  
  <p>Also I am using following 2 utility functions as I am storing json obj as well into localStorage.</p>
  
  <pre><code>Storage.prototype.setObj = function(key, obj) {
  return this.setItem(key, JSON.stringify(obj));
  }
   Storage.prototype.getObj = function(key) {
  if (this.getItem(key) != "undefined") {
      return JSON.parse(this.getItem(key));
  } else {
      return null;
  }
  }
  </code></pre>