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.

Debug your website in I-Pad/I-Phone Safari

Posted in Javascript

For responsive web design it is very difficult to adjust and fix anything if you face any issue in I-PAD/I-phone safari browser. You can debug and inspect a website in I-Pad and I-phone. Follow below steps to inspect DOM element in I-Pad and I-Phone safari browser.

Step 1: Enable web inspector option in your device.

web-inspector-ipad

Step 2: Enable Developer Menu option in MAC.
To use the web inspector, connect to Safari on your computer using a USB cable and access your I-Pad from developer menu. If developer menu is not visible, open preferences in your MAC and click Advanced tab and check “show developer menu in menu bar” option.

safari-preferences

developer-option

Now, you can see Develop option in MAC Safari. If everything is correct, you can see your I-Pad/I-Phone in develop toolbar.

safari-developer-menu

Search your IPAD/IPhone name in developer toolbar. In above screenshot, you I-PAD/I-Phone name is “Office iPad”.

Step 3: Inspect DOM element from Device.

Now, you can to inspect elements/ run JS code in developer console.

safari-inspect-element