build

niceue · Mar 28, 2012 · 9eeb013 · 9eeb013
commit 9eeb013
Show file tree

Hide file tree

Showing 6 changed files with 440 additions and 0 deletions.
diff --git a/README.md b/README.md
@@ -0,0 +1,6 @@
+
+### HTML5 Web Storage Solutions
+
+HTML5 provide a web storage API, include localStorage and sessionStorage, that most browsers have supported.
+But not in some old browsers like IE lower than version 7, and Firefox lower than version 3.5.
+This script will provide solutions for it, and after you have include the script, you can use the HTML5 web storage API directly.
diff --git a/build/localstorage.js b/build/localstorage.js
diff --git a/build/sessionstorage.js b/build/sessionstorage.js
diff --git a/src/index.html b/src/index.html
@@ -0,0 +1,125 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset=utf-8>
+<title>HTML5 Demo: Storage</title>
+<script src="localstorage.source.js"></script>
+<script src="sessionstorage.source.js"></script>
+<style>
+div { margin: 10px 0;}
+.blue {color:blue}
+label {display:inline-block;*display:inline;*zoom:1; width: 120px; line-height: 32px;}
+</style>
+</head>
+<body>
+<h1>Storage Test</h1>
+    <p>Values are stored on <code>keyup</code></p>
+    <p>Content loaded from previous sessions:</p>
+    <ul id="previous"></ul>
+
+<div>
+	<label for="session">sessionStorage:</label>
+	<input type="text" name="session" value="" id="session" />          
+</div>
+<div>
+	<label for="local">localStorage:</label>
+	<input type="text" name="local" value="" id="local" />
+</div>
+	<input type="button" value="load value" onclick="loadStorage()" />
+    <input type="button" id="clear" value="Clear storage" />
+	<input type="button" value="dump" onclick="dumpKeys()" />
+
+<script>
+
+var addEvent = (function () {
+  if (document.addEventListener) {
+    return function (el, type, fn) {
+      if (el && el.nodeName || el === window) {
+        el.addEventListener(type, fn, false);
+      } else if (el && el.length) {
+        for (var i = 0; i < el.length; i++) {
+          addEvent(el[i], type, fn);
+        }
+      }
+    };
+  } else {
+    return function (el, type, fn) {
+      if (el && el.nodeName || el === window) {
+        el.attachEvent('on' + type, function () { return fn.call(el, window.event); });
+      } else if (el && el.length) {
+        for (var i = 0; i < el.length; i++) {
+          addEvent(el[i], type, fn);
+        }
+      }
+    };
+  }
+})();
+function getStorage(type) {
+  var storage = window[type + 'Storage'],
+    delta = 0,
+    li = document.createElement('li');
+
+  if (!window[type + 'Storage']) return;
+
+  if (storage.getItem('value')) {
+    delta = ((new Date()).getTime() - (new Date()).setTime(storage.getItem('timestamp'))) / 1000;
+
+    li.innerHTML = type + 'Storage: <span class="blue">' + storage.getItem('value') + '</span> (last updated: ' + delta + 's ago)';
+  } else {
+    li.innerHTML = type + 'Storage is empty';
+  }
+
+  document.getElementById('previous').appendChild(li);
+}
+
+getStorage('session');
+getStorage('local');
+
+function loadStorage(){
+	var val1= sessionStorage.getItem('value'),
+		val2= localStorage.getItem('value');
+	document.getElementById('session').value = val1? val1:'';
+	document.getElementById('local').value = val2? val2:'';
+}
+
+addEvent(document.getElementById('session'), 'keyup', function () {
+  sessionStorage.setItem('value', this.value);
+  sessionStorage.setItem('timestamp', (new Date()).getTime());
+});
+
+addEvent(document.getElementById('local'), 'keyup', function () {
+  localStorage.setItem('value', this.value);
+  localStorage.setItem('timestamp', (new Date()).getTime());
+});
+
+addEvent(document.getElementById('clear'), 'click', function () {
+  sessionStorage.clear();
+  localStorage.clear();
+  document.getElementById('previous').innerHTML = '';
+  getStorage('local');
+  getStorage('session');
+});
+
+function dumpKeys(){
+	var len = localStorage.length, name;
+	var str='[localStorage]:\nlength:'+ len +'\nstorage:\n{\n';
+	for(var i=0; i<len; i++){
+		name = localStorage.key(i);
+		str+= name+' : '+ localStorage.getItem(name);
+		str+= ',\n';
+	}
+	str+= '}\n\n';
+
+	len = sessionStorage.length;
+	str+='[sessionStorage]:\nlength:'+ len +'\nstorage:\n{\n';
+	for(var i=0; i<len; i++){
+		name = sessionStorage.key(i);
+		str+= name+' : '+ sessionStorage.getItem(name);
+		str+= ',\n';
+	}
+	str+= '}';
+	alert(str);
+}
+</script>
+</body>
+</html>
diff --git a/src/localstorage.source.js b/src/localstorage.source.js
@@ -0,0 +1,77 @@
+/** HTML5 localStorage
+ * @desc    Cross Browser localStorage, 
+ * @copy    Jony (www.niceue.com), MIT Licensed
+ */
+(function(w, d){
+	if(!w.localStorage){		
+        // userData IE5+ (http://msdn.microsoft.com/en-us/library/ms531424.aspx)
+        if(d.documentElement.addBehavior){
+            var e = d.createElement("meta"), s = "localStorage";
+			e.addBehavior("#default#userdata");
+			d.getElementsByTagName("head")[0].appendChild(e);
+			var w.localStorage = {
+					length: 0,
+					key: function(n){
+						return (n>=0 && n<this.length) ? _a()[n].nodeName : null
+					},
+					setItem: function(key , val){
+						e.load(s);
+						e.setAttribute(key , val);
+						e.save(s);
+						_l();
+					},
+					getItem: function(key){
+						e.load(s);
+						return e.getAttribute(key);
+					},
+					removeItem: function(key){
+						e.load(s);
+						e.removeAttribute(key);
+						e.save(s);
+						_l();
+					},
+					clear: function(){
+						e.load(s);
+						var a, i = 0;
+						while (a = _a()[i++]) e.removeAttribute(a.nodeName);
+						e.save(s);
+						this.length=0;
+					}
+				},
+                _a = function(){
+                    return e.XMLDocument.documentElement.attributes
+                },
+				_l = function(){
+					w.localStorage.length = _a().length
+				};
+            e.load(s);
+            _l();
+
+		// globalStorage FF2+ (https://developer.mozilla.org/en/dom/storage#globalStorage)
+        }else if(w.globalStorage){
+            var gs = w['globalStorage'][w.location.hostname],
+                w.localStorage = {
+                    length: 0,
+                    key: function(n){
+                        return gs.key(n)
+                    },
+                    setItem: function(key, val){
+                        gs.setItem(key, val);
+                        this.length = gs.length;
+                    },
+                    getItem: function(key){
+                       return gs.getItem(key) 
+                    },
+                    removeItem: function(key){
+                        gs.removeItem(key);
+                        this.length = gs.length;
+                    },
+                    clear: function(){
+                        for(var key in gs) this.removeItem(key);
+                        this.length = 0;
+                    }
+                };
+            w.localStorage.length = gs.length;
+		}
+    }
+})(window, document);