用userdata和localstorage做跨瀏覽器本地儲存（轉）

1. 瀏覽器支持

userData是微軟爲IE在系統中開闢的存儲空間。因此只支持windows+IE。意外的是從IE5.5就已經開始userData了。

2. 大小限制

Security ZoneDocument Limit (KB)Domain Limit (KB)
Local Machine 1281024
Intranet 512 10240
Trusted Sites 1281024
Internet 128 1024
Restricted 64 640
線上使用時，單個文件大小限制爲128KB,一個域名下文件大小限制爲1024KB,文件數應該沒有限制。在受限站點裏這兩個值分別是64KB和640KB，所以如果考慮到各種情況的話，單個文件最好能控制64KB以下。

3. 使用

userData可以綁定到，幾乎所有標籤上。
官方文檔還加了說明:
Setting the userData behavior class on the html, head, title, or style object causes an error when the save or load method is called.

apply to:
A, ABBR, ACRONYM, ADDRESS, AREA, B, BIG, BLOCKQUOTE, BUTTON, CAPTION, CENTER, CITE, CODE, DD, DEL, DFN, DIR, DIV, DL, DT, EM, FONT, FORM, hn, HR, I, IMG, INPUT type=button, INPUT type=checkbox, INPUT type=file, INPUT type=hidden, INPUT type=image, INPUT type=password, INPUT type=radio, INPUT type=reset, INPUT type=submit, INPUT type=text, KBD, LABEL, LI, LISTING, MAP, MARQUEE, MENU, OBJECT, OL, OPTION, P, PLAINTEXT, PRE, Q, S, SAMP, SELECT, SMALL, SPAN, STRIKE, STRONG, SUB, SUP, TABLE, TEXTAREA, TT, U, UL, VAR, XMP

可以使用style方式也可以用js來創建支持userData的對象。
html方式

js創建

o=document.createElement(‘input’);
o.type=’hidden’;
o.addBehavior(‘#default#userData’);
//等同於 o.style.behavior=”url(‘#default#userData’)”;
document.body.appendChild(o);

屬性

expires 設置或者讀取過期時間

XMLDocument 讀取文件的XML DOM

方法

getAttribute 讀取指定屬性的值
load 打開文件
removeAttribute 刪除指定的屬性
save 保存文件
setAttribute 爲指定屬性賦值

4. 目錄限制

localStorage不能跨域訪問，而userData更加嚴格，不能跨目錄訪問，如:
http://example.com/path1
只能是http://example.com/path1/example.php目錄下網頁文件纔可訪問 。
而http://example.com/path1/path2目錄下所有文件是訪問不到path1保存的數據的。

5. 封裝

不想再自己寫了,下面是來自sofish.de的代碼：

typeof window.localStorage == 'undefined' && ~function() {
		var localStorage = window.localStorage = {},
			prefix = 'data-userdata',
			doc = document,
			attrSrc = doc.body,
			html = doc.documentElement,

			mark = function(key, isRemove, temp, reg) {
				html.load(prefix);
				temp = html.getAttribute(prefix);
				reg = RegExp('\\b' + key + '\\b,?', 'i');
				hasKey = reg.test(temp) ? 1 : 0;
				temp = isRemove ? temp.replace(reg, '').replace(',', '') : hasKey ? temp : temp === '' ? key : temp.split(',').concat(key).join(',');
				html.setAttribute(prefix, temp);
				html.save(prefix);
			};
		attrSrc.addBehavior('#default#userData');
		html.addBehavior('#default#userData');

		localStorage.getItem = function(key) {
			attrSrc.load(key);
			return attrSrc.getAttribute(key);
		};

		localStorage.setItem = function(key, value) {
			attrSrc.setAttribute(key, value);
			attrSrc.save(key);
			mark(key);
		};

		localStorage.removeItem = function(key) {
			attrSrc.removeAttribute(key);
			attrSrc.save(key);
			mark(key, 1);
		};

		localStorage.clear = function() {
			html.load(prefix);
			var attrs = html.getAttribute(prefix).split(','),
				len = attrs.length;
				for(var i=0 ; i<len ; i++) {
					attrSrc.removeAttribute(attrs[i]);
					attrSrc.save(attrs[i]);
				};
				html.setAttribute(prefix, '');
				html.save(prefix);
		};
	}();

原文地址：http://mao.li/cross-browser-local-storage-with-userdata-and-localstorage/