iT邦幫忙

2018 iT 邦幫忙鐵人賽
DAY 42
0
Modern Web

30天學習30套前端技術(2018年)系列 第 42

[十分鐘學習] Store.js - 前端微型暫存DB

example1

針對任何專案,都可以做的跨瀏覽器的資料存取,全站都可以運作,瀏覽器支援度高,小專案不想導入大型框架不錯的選擇

GitHub Star: 10,000
Javascripting Overall: 87%
瀏覽器: ChromeFirefoxIE6+
RWD: 支援
License: MIT


《安裝》

  • CDN

    <!-- Store.js v1.3.7 -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/store.js/1.3.7/store.min.js"></script>
    
  • npm

    $ npm install store
    

《範例》

  • CRUD

    <div id="view"></div>
    <form>
    	<hr />
    	<label>Key</label><input type="text" id="key" value="user" >
    	<label>Value</label><input type="text" id="value" value="Tom" >
    	<hr />
    	<input type="submit" value="Update" onclick="javascript:update()">
    	<input type="button" value="Remove" onclick="javascript:remove()">
    </form>
    <script>
    	read();
    	function update()
    	{
    		// 寫入資料
    		store.set( document.getElementById( "key" ).value, document.getElementById( "value" ).value );
    		read();
    	}
    	function remove()
    	{
    		// 移除資料
    		store.remove( document.getElementById( "key" ).value );
    		read();
    	}
    	function read()
    	{
    		// 讀取資料
    		var data = store.getAll();
    		document.getElementById( "view" ).innerHTML = JSON.stringify( data );
    	}
    </script>
    

    函式列表

    函式 描述
    store.remove( 【鍵】 ) 移除【鍵】
    store.set( 【鍵】 ) 設定【鍵】的【值】
    store.get( 【鍵】 ) 取得【鍵】的【值】
    store.getAll() 取得全部【鍵】的【值】
    store.clearAll() 移除全部【鍵】

《延伸》

  1. marcuswestin/store.js: Cross-browser storage for all use cases, used across the web.

上一篇
[十分鐘學習] fullPage.js - 全頁式導覽
下一篇
[十分鐘學習] FullCalendar - 滿版行事曆
系列文
30天學習30套前端技術(2018年)61

1 則留言

0
pikaka
iT邦新手 5 級 ‧ 2018-02-03 18:37:11

請問這個js的意思是可以跨瀏覽器存資料嗎
就是A瀏覽器在Z網站存值,然後B瀏覽器開Z網站可以讀到值嗎?

mfhsueh iT邦新手 4 級‧ 2018-02-03 20:32:41 檢舉

不好意思,我的翻譯有點問題,在此修正,跨瀏覽器要表達的是對瀏覽器的支援度高(IE6+、iOS 8+、Android 4+、Firefox 4+、Chrome 27+、 Safari 5+和Opera 11+)。所以Store.js不能在不同瀏覽器下同時存取一份資料,每個瀏覽器的資料是獨立的,謝謝提問。

pikaka iT邦新手 5 級‧ 2018-02-03 23:49:26 檢舉

了解 還以為有啥特殊解法可以做到這種不安全的事XD

我要留言

立即登入留言