Membangun Sticky Notes yang Menetap dengan Local Storage

Indonesian (Bahasa Indonesia) translation by Ari Ana (you can also view the original English article)

Penyimpanan lokal HTML5 seperti cookie dengan steroid; ini sangat mudah digunakan namun tetap begitu kuat. Dalam tutorial ini, saya akan menunjukkan cara membuat fungsionalitas "catatan tempel", yang memungkinkan pengguna mengambil catatan yang menetap saat menjelajahi situs Anda.

Langkah 1: HTML

Karena sifat dinamis proyek ini, tidak banyak kode yang bisa dilakukan dalam markup semantik biasa. Kami hanya akan mensimulasikan halaman web dengan menyatukan beberapa konten pengisi:

  <!DOCTYPE html>
    <html>
    <head>
        <meta charset='utf-8' />
        <title>HTML 5 complete</title>
        <link rel="stylesheet" href="default.css" />
        <link rel="stylesheet" href="stickies/stickies.css" />
        <!--[if IE]>
        <script src="https://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
        <![endif]-->
    </head>
    <body>
        <article>
            <header>
                <h1> Sample Article Title</h1>
            </header>
            <p>Lorem ipsum dolor. . . </p>
            <!-- a few lorem-ipsum paragraphs later . . . -->
            <footer>
                <p>Copyright 2010 Andrew Burgess</p>
            </footer>
        </article>

        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
        <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.2/jquery-ui.min.js"></script>
        <script src="json2.js"></script>
        <script src="stickies/stickies.js"></script>
        <script>
        </script>
    </body>
    </html>

Ada beberapa hal penting yang perlu diperhatikan di sini: kami menyertakan dua file CSS: yang pertama adalah gaya sederhana untuk halaman, yang telah kami sebut default.css. Kemudian, kami memiliki file CSS khusus untuk gaya yang terkait dengan catatan tempel kami; ini disebut stickies.css, dan seperti yang Anda lihat, ia tinggal di folder "stickies". Di bagian bawah, kami menyertakan empat skrip:

jQuery, dari CDN Google
JQuery UI, dari CDN Google
JSON2, dari Douglas Crockford
stickies.js kita sendiri, yang tinggal di direktori "stickies"

Kemudian, kami memiliki tag script kosong yang akan kami gunakan untuk menghidupkan mesin sedikit kemudian.

Dan itu untuk HTML!

Langkah 2: CSS

Konten default.css sangat sederhana:

   body {
        margin:0;
        padding:0;
        background:#ccc;
        font:14px/1.5 "Helvetica Neue", Helvetica, Arial, san-serif;
    }
    article, footer, header { display: block; }
    article {
        width:880px;
        background:#fff;
        margin:auto;
        padding:40px;
    }
    article header {
        color:#474747;
        border-bottom:1px solid #474747
    }
    article footer {
        font-size:90%;
        color:#ccc;
    }

Itu saja; sekarang, ada CSS dari stickies.css untuk dijaga... tapi kita belum memiliki markup itu. Jadi mari kita mulai beberapa JavaScript, dan setelah selesai, kita akan melihat CSS untuk catatan tempel.

Langkah 3: JavaScript

Inilah kerangka untuk aplikasi JavaScript kita:

    var STICKIES = (function () {
        var initStickies = function () {},
            openStickies = function () {},
            createSticky = function (data) {},
            deleteSticky = function (id) {},
            saveSticky   = function () {},
            markUnsaved  = function () {};
            
        return {
            open   : openStickies,
            init   : initStickies
        };
    }());

Kita punya beberapa teknik menarik yang terjadi di sini. Pertama adalah fungsi yang memanggil dirinya sendiri: mungkin terlihat seperti kita menugaskan fungsi ke variabel STICKIES, tapi jika Anda melihat dari dekat fungsi ini, Anda akan melihat bahwa kita menjalankannya dengan segera. Sebagai petunjuk—untuk mengingatkan kita bahwa ini bukan fungsi normal—kita membungkus keseluruhan fungsi dalam tanda kurung. Jadi, STICKIES bukanlah fungsi, itu adalah nilai yang dikembalikan dari fungsi itu, yang merupakan objek, dalam kasus ini.

Itu membawa kita ke teknik berikutnya: penutupan. Perhatikan bahwa dari enam fungsi yang kita buat, hanya dua di antaranya yang terpapar pada pengguna (sebenarnya hanya satu yang diperlukan untuk penggunaan yang kami rencanakan; jika kita ingin membangun dukungan untuk membuat catatan ke situs web Anda, kita dapat mengekspos createSticky dan deleteSticky). Meskipun fungsi yang memanggil dirinya sendiri selesai dijalankan sebelum kita menggunakan metode ini, kita akan dapat menggunakan fungsi lain yang telah kita definisikan.

Oke, mari beralih ke isi dari fungsi ini.

initStickies

Kita akan mulai dengan melihat fungsi initStickies:

    var initStickies = function initStickies() {
        $("<div />", { 
            text : "+", 
            "class" : "add-sticky",
            click : function () { createSticky(); }
        }).prependTo(document.body);
        initStickies = null;
    },

Ini sangat sederhana. Kita akan menggunakan jQuery dengan cukup sedikit untuk membuat elemen, dan kita menggunakan beberapa sintaks khusus dalam v. 1.4: yang mengirimkan sebuah objek literal dengan spesifikasi elemen sebagai parameter kedua pada fungsi jQuery. Di sini, kita menciptakan sebuah tombol untuk membuat catatan baru. Itu berarti kita membutuhkan div baru; kita menetapkan teksnya ke "+" dan memberinya kelas "add-sticky"; kemudian, kita menetapkan handler klik untuk memanggil metode createSticky (penting untuk memanggil createSticky dari dalam sebuah fungsi, dan tidak ada handler klik yang langsung memanggil createSticky; ini karena createSticky dapat mengambil satu parameter saja, dan kita tidak ingin itu menjadi objek event). Akhirnya, kita menambahkan div ini ke body. Kita akhiri dengan mengatur initStickies menjadi null; ya, pada dasarnya kita menyingkirkan fungsi yang kita jalankan. Ini meyakinkan kita bahwa fungsi ini hanya akan dijalankan sekali; kami tidak ingin pengguna API kami secara tidak sengaja menambahkan beberapa tombol "add note" ke halaman.

openStickies

Mari beralih ke metode selanjutnya, openStickies:

    openStickies = function openStickies() {
        initStickies && initStickies();
        for (var i = 0; i < localStorage.length; i++) {
            createSticky(JSON.parse(localStorage.getItem(localStorage.key(i))));
        }
    },

Kita mulai dengan menjalankan initStickies... tapi ada apa dengan sintaksnya? Nah, Anda mungkin akrab dengan operator &&: operator AND boolean. Anda biasanya menggunakannya untuk memeriksa beberapa kondisi dalam pernyataan if. Inilah yang sebenarnya terjadi: ia mengevaluasi ekspresi pertama, dan jika itu true, ia akan terus mengevaluasi ekspresi kedua. Dalam kasus ini, jika initStickies belum diset ke null, kita akan menjalankan fungsinya. Hal ini untuk menghindari kesalahan yang akan datang dari mencoba menjalankan variabel null sebagai fungsi.

Selanjutnya, kita mengulangi setiap item di localStorage. Inilah yang kami lakukan dalam for-loop itu (dari dalam ke luar):

localStorage.key() adalah fungsi hebat yang mengembalikan nama kunci dari nilai localStorage; dibutuhkan angka sebagai parameter. Ini adalah cara yang bagus untuk mengulang setiap item di localStorage.
Begitu kita memiliki kunci untuk barang yang tersimpan, kita bisa mengirimkannya ke localStorage.getItem() untuk mendapatkan nilainya.
Kemudian, kita menyampaikan nilai itu ke JSON.parse(); ini berasal dari perpustakaan Crockford. Karena kita menyimpan beberapa nilai untuk setiap catatan, kita menggunakan JSON.stringify() di ujung yang lain untuk mengubah objek menjadi string JSON, yang kita simpan. Di sini, kita mengubahnya dari string kembali menjadi objek.
Akhirnya, kita mengirimkan objek itu ke createSticky(), yang mengubahnya menjadi catatan tempel.

createSticky

Sekarang, mari kita lihat metode createSticky itu.

    createSticky = function createSticky(data) {
        data = data || { id : +new Date(), top : "40px", left : "40px", text : "Note Here" }
        
        return $("<div />", { 
            "class" : "sticky",
            'id' : data.id
             })
            .prepend($("<div />", { "class" : "sticky-header"} )
                .append($("<span />", { 
                    "class" : "status-sticky", 
                    click : saveSticky 
                }))
                .append($("<span />", { 
                    "class" : "close-sticky", 
                    text : "trash", 
                    click : function () { deleteSticky($(this).parents(".sticky").attr("id")); }
                }))
            )
            .append($("<div />", { 
                html : data.text, 
                contentEditable : true, 
                "class" : "sticky-content", 
                keypress : markUnsaved
            }))
        .draggable({ 
            handle : "div.sticky-header", 
            stack : ".sticky",
            start : markUnsaved,
            stop  : saveSticky  
         })
        .css({
            position: "absolute",
            "top" : data.top,
            "left": data.left
        })
        .focusout(saveSticky)
        .appendTo(document.body);
    },

Ya, sudah lama, tapi tidak akan terlalu sulit. Pertama, perhatikan bahwa fungsi ini mengambil objek data; seperti yang baru saja kita lihat di openStickies, kita meneruskan data yang tersimpan ke fungsi ini. Namun, jika kami tidak menyampaikan data apa pun (yaitu, kami membuat catatan baru), kami akan membuat objek catatan default. Karena semua catatan harus dibuat pada satu titik, semua catatan akan dimulai dengan konfigurasi ini. Perhatikan bahwa untuk id catatan, kami menggunakan +new Date(); yang ditambah operator plus unary yang mengubah tanggal yang kami dapatkan dari tanggal baru ke angka, jadi pernyataan ini menghasilkan angka yang mewakili jumlah milidetik sejak 1 Januari 1970. Jelas, nomor ini akan terus berubah, jadi ini adalah cara yang bagus untuk mengidentifikasi setiap catatan secara unik.

Sisa dari fungsi adalah string panjang metode berantai jQuery. Sebelum kita melalui ini, perhatikan bahwa kita mengembalikan hasilnya. Jika kita mengekspos metode ini kepada pengembang menggunakan mirco-API kita, itu akan mengembalikan referensi ke elemen div catatan tempel.

Jadi, inilah yang terjadi:

Pertama, kita membuat div yang merupakan tempurung dari catatan tempel. Dengan menggunakan sintaks jQuery 1.4 yang bermanfaat, kami memberikan kelas "sticky" dan id dari objek data.
Kemudian, kita menambahkan div ke sana; div ini mendapat kelas "sticky-header". div.sticky-header kemudian mendapat dua span ditambahkan ke sana. Yang pertama, span.sticky-status, mendapat handler klik yang memanggil fungsi saveSticky. Namun, itu sebenarnya fitur tersembunyi: span ini akan menampilkan status yang sticky: tersimpan atau belum disimpan. Akan ada beberapa cara sticky menyimpan datanya ke localStorage; mungkin pengguna akan berpikir bahwa mengklik 'unsaved' akan menyimpan catatan, jadi kami akan memberi mereka fungsi itu. Span kedua, span.close-sticky, akan menjadi tombol hapus: saat pengguna mengkliknya, kami akan menghapus sticky dari localStorage, melalui metode deleteSticky. Kami melewatkan metode itu id catatan.
Selanjutnya, kita menambahkan div lain ke div.sticky utama; perhatikan bahwa kita mengatur properti html ke data.text; saat kita menyimpan teks catatan, kita menggunakan metode html() dari jQuery, karena menggunakan text() menghilangkan jeda baris. Kita juga mengatur contentEditable:true di div ini, karena ini adalah isi dari catatan. Dengan demikian, itu juga mendapat kelas sticky-content. Akhirnya, ketika tombol ditekan pada div ini (artinya pengguna mengubah konten), kami ingin menandainya sebagai tidak tersimpan, jadi kita akan memanggil fungsi itu (yang akan segera kita lakukan).
Sekarang, kami menggunakan fitur jQuery UI draggable untuk membuat catatan tempel kita dapat dipindah-pindahkan. Di objek parameter kita, kita menggunakan properti handle agar catatan kita hanya dapat dipindahkan dari bilah header. Properti stack adalah pemilih untuk elemen yang dapat diseret yang ingin di-"stack"; dengan pengaturan ini, catatan yang saat ini terseret akan selalu berada di atas. Akhirnya, ketika kita mulai menyeret catatan, kita ingin menandainya sebagai "belum disimpan" (karena kita juga harus menyimpan koordinatnya), dan ketika kita berhenti menyeret, kita akan menyimpan sticky itu.
Selanjutnya, kita menetapkan beberapa gaya untuk div.sticky kita; kita memposisikannya secara absolute, dan kemudian menetapkan nilai atas dan kiri ke nilai pada objek data. Dengan cara ini, catatan akan tetap mempertahankan posisinya dan juga isinya saat kita me-refresh halaman.
Akhirnya, kita akan mengatur event handler saat kita focusout sticky (intinya, klik di luarnya setelah mengkliknya): kita ingin menyimpan sticky. Terakhir, kami akan menambahkannya ke body. Sebagai rujukan, inilah struktur html yang seharusnya kita hasilkan:

<div class="sticky ui-draggable" id="1281194825332" style="position: absolute; top: 40px; left: 40px;">
    <div class="sticky-header">
            <span class="sticky-status"></span>
            <span class="close-sticky">trash</span>
    </div>
    <div contenteditable="true" class="sticky-content">
        Note Here
    </div>
</div>

Dan itulah fungsi createSticky kita.

deleteSticky

Sekarang kita memiliki fungsi deleteSticky; ini sangat sederhana:

1	deleteSticky = function deleteSticky(id) {
2	localStorage.removeItem("sticky-" + id);
3	$("#" + id).fadeOut(200, function () { $(this).remove(); });
4	},

Seperti yang Anda ingat, fungsi deleteSticky mengambil id dari sebuah catatan sebagai parameternya. localStorage.removeItem() adalah metode jamnya: kita menyampaikan ke nilai yang tersimpan secara lokal untuk menghapus pasangan kunci-nilai tersebut (Perhatikan bahwa ketika kita menyimpan data catatan, kita menambahkan "sticky-" ke id). Kemudian, kita menemukan elemen dengan id yang diberikan, memudarkannya, dan menghapusnya. Catatan dihapus!

saveSticky

Kedua-sampai-terakhir mungkin metode yang paling penting hari ini: saveSticky: ini adalah lem yang membuat semuanya bekerja.

    saveSticky = function saveSticky() {
        var that = $(this),  sticky = (that.hasClass("sticky-status") || that.hasClass("sticky-content")) ? that.parents('div.sticky'): that,
        obj = {
            id  : sticky.attr("id"),
            top : sticky.css("top"),
            left: sticky.css("left"),
            text: sticky.children(".sticky-content").html()               
        }
        localStorage.setItem("sticky-" + obj.id, JSON.stringify(obj));    
        sticky.find(".sticky-status").text("saved");
    },

Baris pertama adalah sedikit resolusi: ada tiga elemen yang berbeda yang bisa kita panggil fungsi ini darinya. Pertama, kita akan "men-jQuery-kan" this ke that; jika elemennya memiliki kelas "sticky-status" atau "sticky-content", kita akan mendapatkan induk div.sticky; jika tidak memiliki salah satu dari kelas tersebut, maka itu adalah div.sticky itu sendiri, jadi kita akan langsung menggunakannya.

Kemudian, kita perlu mendapatkan nilai yang ingin kita simpan. Seperti yang bisa Anda lihat, kita mendapatkan id, offset dari atas dan kiri, dan html dari anak .sticky-content; ingat, kita menggunakan html() bukannya text() karena kita ingin menyimpan jeda baris. Kemudian, kita menggunakan localStorage.setItem untuk menyimpan datanya. Ingat, dibutuhkan dua parameter: kunci dan nilai untuk disimpan. Karena localStorage hanya menyimpan string, kita menggunakan JSON.stringify() untuk mengubah objek menjadi string.

Terakhir, mengubah status sticky menjadi "saved."

markUnsaved

Kita punya satu fungsi terakhir, yang hanya fungsi helper:

1	markUnsaved = function markUnsaved() {
2	var that = $(this), sticky = that.hasClass("sticky-content") ? that.parents("div.sticky") : that;
3	sticky.find(".sticky-status").text("unsaved");
4	}

Sekali lagi, kita harus mulai dengan menyelesaikan referensi ke div.sticky; begitu kita melakukannya, kita bisa menemukan span status dan mengatur teksnya menjadi "unsaved."

Percaya atau tidak, itu saja JavaScript-nya.

Langkah 4: CSS, Kunjungan Ulang

Sekarang kita tahu apa markup catatan tempel kita, kita bisa memberinya gaya. Ini sangat sederhana; tapi lihat saja, dan saya akan membuat beberapa komentar di akhir:

   :focus {
        outline:0;
    }
    .add-sticky {
        cursor: default;
        position:absolute;
        top:1px;
        left:1px;
        font-size:200%;
        background:#000;
        color:#fff;
        border:2px solid #fff;
        border-radius:40px;
        -webkit-border-radius:40px;
        -moz-border-radius:40px;
        text-align:center;
        line-height:25px;
        width:30px;
        height:30px;
    }
    .add-sticky:hover {
        background: #474747;
    }
    .sticky {
        width:300px;
        background:#fdfdbe;
        box-shadow:3px 3px 10px rgba(0,0,0,0.45);
        -webkit-box-shadow:3px 3px 10px rgba(0,0,0,0.45);
        -moz-box-shadow:3px 3px 10px rgba(0,0,0,0.45);
    }
    .sticky-content {
        min-height:150px;
        border-left:3px double rgba(238, 150, 122, .75);
        margin-left:30px;
        padding:5px;
    }
    .sticky-header {
        padding:5px;
        background:#f3f3f3;
        border-bottom:2px solid #fefefe;
        box-shadow:0 3px 5px rgba(0,0,0,0.25);
        -webkit-box-shadow:0 3px 5px rgba(0,0,0,0.25);
        -moz-box-shadow:0 3px 5px rgba(0,0,0,0.25);
    }
    .sticky-status {
        color:#ccc;
        padding:5px;
    }
    .close-sticky {
        background:#474747;
        float:right;
        cursor:default;
        color:#ececec;
        padding:1px 5px;
        border-radius:20px;
        -webkit-border-radius:20px;
        -moz-border-radius:20px;
    }

Ada beberapa hal menarik di sini:

Beberapa browser menempatkan garis tepi di seputar elemen dengan contenteditable=true saat Anda mengedit konten. Kita tidak menginginkan itu, jadi kita menyingkirkannya dengan deklarasi :focus kita.
Tombol "Add Sticky" diposisikan di sudut kiri atas; tampilannya samar-samar mirip dengan "Add Dashboard Widget" di Mac OS X.
Kita menggunakan properti CSS3 border-radius dan box-shadow (dan inkarnasi prefiks vendor yang sesuai).
Kami juga menggunakan rgba() untuk warna bayangan kami. Dibutuhkan empat parameter: warna merah, hijau, dan biru, dan nilai alpha (transparansi).

Selain itu, itu hanya CSS standar Anda. Seperti inilah tampilan catatan yang diberi gaya:

Langkah 5: Memulai Stickies

Sekarang setelah kita membuat API kita, saatnya memulainya; kita bisa melakukan itu dari tag script tambahan kosong di file index.html kita:

1	STICKIES.open();

Kesimpulan: Produk Akhir

Kita sudah selesai! Inilah produk akhir yang beraksi:

Hanya itu yang saya miliki hari ini; bagaimana Anda berencana untuk menggunakan penyimpanan lokal HTML5 untuk membumbui proyek web Anda? Beri tahu saya di komentar!