Web development blog for Html, CSS, javascript, JQuery developers. At Kodecrash you will find best solution for complex problems.

HTML5 sessionStorage Safari “QUOTA_EXCEEDED_ERR”

Posted in Html, Javascript

If you have opened a web page in private mode in ios-safari browser and if you are using sessionStorage/localStorage in your code sometimes you will get “QUOTA_EXCEEDED_ERR:”.

Error is highlighted below:

“QUOTA_EXCEEDED_ERR: DOM Exception 22: An attempt was made to add something to storage that exceeded the quota.”

This can be overcome by simply putting sessionStorage code in try catch block.

              if (typeof sessionStorage === 'object') {
		    try {
		        sessionStorage.setItem('sessionStorage', 1);
		        sessionStorage.removeItem('sessionStorage');
		        sessionStorage.setItem("questions", JSON.stringify(data));
		    } catch (e) {
		        Storage.prototype._setItem = Storage.prototype.setItem;
		        Storage.prototype.setItem = function() {};
		    }
		} 

The same code is applicable for localStorage also.

              if (typeof localStorage === 'object') {
		    try {
		        localStorage.setItem('localStorage', 1);
		        localStorage.removeItem('localStorage');
		        localStorage.setItem("questions", JSON.stringify(data));
		    } catch (e) {
		        Storage.prototype._setItem = Storage.prototype.setItem;
		        Storage.prototype.setItem = function() {};
		    }
		} 

Web development blog for Html, CSS, javascript, JQuery developers. At Kodecrash you will find best solution for complex problems.

Object tag z-index not working in IE

Posted in CSS, CSS Interview Questions, Html

If you are playing any flash/brightcove video using object tag and you want to show custom play button or image on video you can use z-index property to adjust play button position. This works fine in chrome and Mozilla except internet explorer. In IE object tag won’t take any css property. See below example

<object type=”video/quicktime” data=”http://localhost/videos/qtmovie.mov” width=”340″ height=”280″>
<param name=”controller” value=”true” />
<param name=”autoplay” value=”false” />
<param name=”wmode” value=”transparent” />
</object>

By default, wmode property is set to “transparent” to apply z-index or any css property set wmode property to “opaque”

Web development blog for Html, CSS, javascript, JQuery developers. At Kodecrash you will find best solution for complex problems.

sessionStorage in HTML 5

Posted in Html, javascript interview questions

The sessionStorage object stores the data for only one session. The data is deleted when the user closes the browser window. sessionSorage object has following methods.

Store data in sessionstorage

var ax=10;
sessionStorage.setItem("data",ax);

Retrieve data from sessionStorage

sessionStorage.getItem("data");

Remove Item from sessionStorage

sessionStorage.removeItem("data");

Clear sessionStoage

sessionStorage.clear();

We can also store object in session. For example, consider below object

var person={
    "name":"John", 
    "age":18,
    "country":"Ireland"
};
console.log(sessionStorage.setItem("data", person))
console.log(sessionStorage.setItem("data",JSON.stringify(person)))

Use JSON.stringify method to store object in sessionStorage. In above example, first console.log will print “[object object]” and second will print “{“name”:”John”,”age”:18,”country”:”Ireland”}”

Retrieve stored object from sessionStorage
Use JSON.parse to convert string to object.

var person= JSON.parse(sessionStorage.getItem("read_json"))