<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>FoxLing - 前端开发 &#187; 本地存储</title>
	<atom:link href="http://foxling.org/tag/%e6%9c%ac%e5%9c%b0%e5%ad%98%e5%82%a8/feed/" rel="self" type="application/rss+xml" />
	<link>http://foxling.org</link>
	<description>我还在寻找方向</description>
	<lastBuildDate>Tue, 10 Apr 2012 16:48:41 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.3.1</generator>
		<item>
		<title>浏览器本地存储(1)</title>
		<link>http://foxling.org/js-ajax-dom/broswer-local-storage/</link>
		<comments>http://foxling.org/js-ajax-dom/broswer-local-storage/#comments</comments>
		<pubDate>Wed, 14 Apr 2010 15:23:34 +0000</pubDate>
		<dc:creator>FoxLing</dc:creator>
				<category><![CDATA[JS/AJAX/DOM]]></category>
		<category><![CDATA[globalStorage]]></category>
		<category><![CDATA[localStorage]]></category>
		<category><![CDATA[sessionStorage]]></category>
		<category><![CDATA[WebStorage]]></category>
		<category><![CDATA[本地存储]]></category>
		<category><![CDATA[浏览器]]></category>

		<guid isPermaLink="false">http://foxling.org/?p=519</guid>
		<description><![CDATA[浏览器存储方式主要下面几种： Cookie4096字节；缺点：存储量小，请求头附带cookie带来性能问题。 Flash Share Object默认支持100k，跨浏览器存储最好的方式，毕竟现在没有安装flash插件的用户是很少的；缺点：需要加载一个swf文件，个别用户不支持flash。有一个基于jQuery的插件叫 jStore ，就是通过Flash Share Object实现的。 IE的 UserData最少也能支持640k，IE8后已经支持DOM Storage；缺点：IE only。 DOM Storage默认支持5M存储量；缺点：IE7，IE6不支持。 Google Gears功能最强；缺点：但需要安装软件，而且，安装的用户是较少的。 这里主要学习 IE 的 UserData 和 DOM Storage DOM Storage 支持：Firefox, Chrome, Opera, Safari, IE8+ 关于Web Storage的w3c文档，请移步 http://dev.w3.org/html5/webstorage/ DOM Storage 分为两种， sessionStorage 和 localStorage，顾名思义，sessionStorage是指在当前窗口会话中持续保存的数据，哪怕你在不同的网站中跳转也不会清除，但关闭窗口后就没了；localStorage是在本地永久存储的。 方法： key(index) 根据索引获取值 getItem(key) 获取 key 的值 setItem(key, data) 设置 key 的值 removeItem(key) 删除 key [...]]]></description>
			<content:encoded><![CDATA[<h3>浏览器存储方式主要下面几种：</h3>
<ul>
<li>Cookie<br />4096字节；缺点：存储量小，请求头附带cookie带来性能问题。</li>
<li>Flash Share Object<br />默认支持100k，跨浏览器存储最好的方式，毕竟现在没有安装flash插件的用户是很少的；缺点：需要加载一个swf文件，个别用户不支持flash。<br />有一个基于jQuery的插件叫 <a href="http://eric.garside.name/docs.html?p=jstore">jStore</a> ，就是通过Flash Share Object实现的。</li>
<li>IE的 UserData<br />最少也能支持640k，IE8后已经支持DOM Storage；缺点：IE only。</li>
<li>DOM Storage<br />默认支持5M存储量；缺点：IE7，IE6不支持。</li>
<li>Google Gears<br />功能最强；缺点：但需要安装软件，而且，安装的用户是较少的。</li>
</ul>
<p>这里主要学习 IE 的 UserData 和 DOM Storage<br />
<span id="more-519"></span></p>
<h3>DOM Storage</h3>
<p>支持：Firefox, Chrome, Opera, Safari, IE8+<br />
关于Web Storage的w3c文档，请移步 <a href="http://dev.w3.org/html5/webstorage/">http://dev.w3.org/html5/webstorage/</a><br />
DOM Storage 分为两种， sessionStorage 和 localStorage，顾名思义，sessionStorage是指在当前窗口会话中持续保存的数据，哪怕你在不同的网站中跳转也不会清除，但关闭窗口后就没了；localStorage是在本地永久存储的。</p>
<p>方法：</p>
<ul>
<li>key(index) 根据索引获取值</li>
<li>getItem(key) 获取 key 的值</li>
<li>setItem(key, data) 设置 key 的值</li>
<li>removeItem(key) 删除 key</li>
<li>clear() 清除所有的key</li>
</ul>
<p>属性：</p>
<ul>
<li>length 当前存储的个数</li>
</ul>
<h3>IE UserData</h3>
<p>支持：IE5+<br />
关于UserData更详细的文档，请看<a href="http://msdn.microsoft.com/en-us/library/ms531424.aspx">http://msdn.microsoft.com/en-us/library/ms531424.aspx</a><br />
通过给 xml 或者 html 标签添加 behavior 来支持 userData<br />
例如：<br />
<code>&lt;input style="behavior:url('#default#userData')" id="userData"&gt;</code><br />
或者，通过脚本来设置：<br />
<code>object.style.behavior = "url('#default#userData')"</code><br />
<code>object.addBehavior ("#default#userData")</code></p>
<p>方法：</p>
<ul>
<li>getAttribute()  获取指定的属性值。</li>
<li>load(object)  从 userData 存储区载入存储的对象数据。</li>
<li>removeAttribute()  移除对象的指定属性。</li>
<li>save(object)  将对象数据存储到一个 userData 存储区。</li>
<li>setAttribute()  设置指定的属性值。</li>
</ul>
<p>属性：</p>
<ul>
<li>expires  设置或者获取 userData behavior 保存数据的失效日期，不设置则为永久。</li>
<li>XMLDocument 获取 XML 的引用。</li>
</ul>
<h3>兼容的解决方法</h3>
<p>这是我写的一个通用的本地存储的插件，缺点：数据不能跨浏览器，比如在IE里保存的，只能在IE里读取：<br />
测试通过的浏览器：IE6, IE7, IE8, Firefox, Chrome, Safari, Opera</p>
<p>支持的方法：</p>
<ul>
<li>get(key) 读取key的值</li>
<li>set(key, value) 设置key的值</li>
<li>del(key) 删除key</li>
<li>support 检测是否支持本地存储</li>
</ul>
<p>使用示例：<br />
<code>if ( Storage.support() ) Storage.set('username', 'foxling');</code></p>
<p><a href="/examples/2010/04/localStorage/index.html" class="view-example">Demo猛击这里</a></p>
<pre>
var Storage = function(win, doc){
		var hasSupport = true,
			store = win.localStorage,
			STORE_NAME = 'localstorage',
			obj,
			support = function (){ return hasSupport },
			error = function(){ throw new Error("don't support localStorage") };

		if (store &#038;&#038; store.getItem){
			obj = {
				set : function(key, value){
					return store.setItem(key, value);
				},
				get : function(key){
					return store.getItem(key);
				},
				del : function(key){
					return store.removeItem(key);
				}
			};
		}else{
			store = doc.documentElement;
			try{
				store.addBehavior('#default#userdata');
				store.save(STORE_NAME);
			}catch(e){
				hasSupport = false;
			}
			if (hasSupport){
				obj = {
					set : function(key, value){
						store.setAttribute(key, value);
						store.save(STORE_NAME);
					},
					get : function(key){
						store.load(STORE_NAME);
						return store.getAttribute(key);
					},
					del : function(key){
						store.removeAttribute(key);
						store.save(STORE_NAME);
					}
				};

			}
		}
		if (!obj){
			obj = {
				set:error,
				get:error,
				del:error
			};
		}
		obj.support = support;
		return obj;
	}(window, document);
</pre>
]]></content:encoded>
			<wfw:commentRss>http://foxling.org/js-ajax-dom/broswer-local-storage/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>

