store.js使用（轉）

store.js使用簡介

store.js 提供了一套跨瀏覽器的本地存儲解決方案。

// 將 'marcus' 存爲 'username'
store.set('username', 'marcus')

//設置過時時間
var expiration = new Date().getTime() + 10000;
store.set('bar', 'foo', expiration);

// 獲取 'username'
store.get('username')

// 刪除 'username'
store.remove('username')

// 清空全部索引
store.clear()

// 存儲對象字面量 - store.js 內部使用了 JSON.stringify方法
store.set('user', { name: 'marcus', likes: 'javascript' })

// 獲取存儲的對象 - store.js 內部使用了 JSON.parse 方法
var user = store.get('user')
alert(user.name + ' likes ' + user.likes)

// 獲取全部存儲的值
store.getAll().user.name == 'marcus'

// 遍歷全部存儲的值
store.forEach(function(val, key) {
    console.log(key, '==', val)
})

工做機制

store.js 優先選擇 localStorage 來進行存儲，在 IE6 和 IE7 降低級使用userData來達到目的。 沒有使用 flash ，不會減慢你的頁面加載速度。也沒有使用 cookies ，不會使你的網絡請求變得臃腫。

store.js 依賴 JSON 來序列化數據進行存儲。

安裝

只需獲取 [store.min.js] 或者 [store+json2.min.js] ，並經過script標籤引入便可使用。

store.enabled flag

若是你的產品使用了 store.js，使用前你首先要檢查 store.enabled 標識：

<script src="store.min.js"></script>
<script>
    init()
    function init() {
        if (!store.enabled) {
            alert('Local storage is not supported by your browser. Please disabled "Private Mode", or upgrade to a modern browser')
            return
        }
        var user = store.get('user')
        // ... and so on ...
    }
</script>

在使用localStorage的時候，雖然可用可是會拋出一個錯誤。例如在使用 Safari的private browsing 模式（無痕瀏覽模式）的時候就會發生這樣的狀況。 其餘瀏覽器容許用戶臨時禁止localStorage的使用。 Store.js 會檢測這些設置並相應的更改 store.enabled 標識。

視頻

Introductory Screencast to Store.js 由 Jack Franklin製做。

在node.js中使用

只需設置下global.localStorage，store.js 在 node.js也能夠正常使用，以下：

global.localStorage = require('localStorage')
var store = require('./store')
store.set('foo', 1)
console.log(store.get('foo'))

支持的瀏覽器

• Tested in iOS 4
• Tested in iOS 5
• Tested in iOS 6
• Tested in Firefox 3.5
• Tested in Firefox 3.6
• Tested in Firefox 4.0+
• Support dropped for Firefox < 3.5 (注意下文提示)
• Tested in Chrome 5
• Tested in Chrome 6
• Tested in Chrome 7
• Tested in Chrome 8
• Tested in Chrome 10
• Tested in Chrome 11+
• Tested in Safari 4
• Tested in Safari 5
• Tested in IE6
• Tested in IE7
• Tested in IE8
• Tested in IE9
• Tested in IE10
• Tested in Opera 10
• Tested in Opera 11
• Tested in Opera 12
• Tested in Node.js v0.10.4 (with https://github.com/coolaj86/n... 1.0.2)

我的模式 Store.js 在瀏覽器開啓了private mode模式（無痕瀏覽）的狀況下可能會失效。 這就須要在使用 store.js前必定要檢查 store.enabled 標識。

Saucelabs.com 給力 很是感謝Saucelabs.com對 store.js 進行了大範圍的瀏覽器測試工做。能夠去看看他們的網站，真的很棒。

Firefox 3.0 & 2.0: 高於v1.3.6版本的再也不支持 FF 2 & 3 。 因此，若是你想要支持FF的古老版本，那你須要使用 v1.3.5 版本的 store.js。

重要提示： 在IE6和IE7中，若是你要存儲鍵值對，那麼不少特殊字符是不容許出如今關鍵字名稱中的。 在@mferretti，提供了一種合適的變通方法，就是把這些特殊字符替換爲t "___"。

存儲大小限制

• IE6 和 IE7中: 總大小最多1MB ， 可是每一個 "path" 或 "document" 最多128kb(參考 http://msdn.microsoft.com/en-...。
• 去這裏 http://dev-test.nemikor.com/w... 能夠查看不一樣瀏覽器的限制狀況。

不支持的瀏覽器

• Firefox 1.0: 不支持 (除非是 cookies 和 flash)
• Safari 2: 不支持 (除非是 cookies 和 flash)
• Safari 3: 沒有同步的 api (有異步的 sqlite api，可是 store.js 是同步的)
• Opera 9: 不清楚是否有同步的api來進行本地存儲
• Firefox 1.5: 不清楚是否有同步的api來進行本地存儲

序列化時的幾點注意

若是不使用store.js，那麼使用localStorage的時候，被存儲的每一個值上都調用了一次toString方法。這就是說，你不能方便的對numbers、 objects 或者 arrays進行存取：

localStorage.myage = 24
localStorage.myage !== 24
localStorage.myage === '24'

localStorage.user = { name: 'marcus', likes: 'javascript' }
localStorage.user === "[object Object]"

localStorage.tags = ['javascript', 'localStorage', 'store.js']
localStorage.tags.length === 32
localStorage.tags === "javascript,localStorage,store.js"

咱們想要的效果 (經過 store.js能夠實現) 是

store.set('myage', 24)
store.get('myage') === 24

store.set('user', { name: 'marcus', likes: 'javascript' })
alert("Hi my name is " + store.get('user').name + "!")

store.set('tags', ['javascript', 'localStorage', 'store.js'])
alert("We've got " + store.get('tags').length + " tags here")

JSON是JavaScript的原生序列化引擎。可是在使用store.js的時候，你不須要本身去對值進行序列化或反序列化，在每次調用 store.set() 和 store.get()的時候，store.js已經分別經過JSON.stringify() 和 JSON.parse() 實現了相同的效果。

一些瀏覽器並不支持原生的 JSON。因此，你須要同時引入 JSON.js。

沒有 sessionStorage和auto-expiration?

沒必要擔憂。我以爲沒辦法提供跨瀏覽器的 sessionStorage 。 然而，在 store.js上能夠看到設置值的生存期的代碼：

var storeWithExpiration = {
    set: function(key, val, exp) {
        store.set(key, { val:val, exp:exp, time:new Date().getTime() })
    },
    get: function(key) {
        var info = store.get(key)
        if (!info) { return null }
        if (new Date().getTime() - info.time > info.exp) { return null }
        return info.val
    }
}
storeWithExpiration.set('foo', 'bar', 1000)
setTimeout(function() { console.log(storeWithExpiration.get('foo')) }, 500) // -> "bar"
setTimeout(function() { console.log(storeWithExpiration.get('foo')) }, 1500) // -> null

測試

對於瀏覽器來講：能夠到 http://marcuswestin.github.io... 來測試最新版本的 store.js。

對於本地測試：能夠 npm install node-static && ./node_modules/node-static/bin/cli.js 後，訪問 http://localhost:8080 來測試。

(注意： test.html 只能經過 http:// 或 https://來訪問。 這是由於經過 file://協議來訪問時，localStore 會失效。)

對於Nodejs：經過 npm install . localStorage && node test-node.js