프런트엔드 실습 - 메모 시스템 (아래)

이 부분은 주로 브라우저 로컬에 localStorage 소스 코드 주소를 저장하는 것을 실현한다

//store 
app.store = {
    __store_key:'__sticky_note__',
    get:function (id){
        var notes = this.getNote();
        return notes[id] || {};
    },
    set:function (id,content){
        var notes = this.getNote();
        if(notes[id]){
            Object.assign(notes[id],content);
        }else{
            notes[id] = content;
        }
        localStorage[this.__store_key] = JSON.stringify(notes);
    },
    remove:function (id){
        var notes = this.getNote();
        delete notes[id];
        localStorage[this.__store_key] = JSON.stringify(notes);
    },
    getNote:function (){
        return JSON.parse(localStorage[this.__store_key] || '{}');
    }
};

5, 초기화

var notes = store.getNote();
Object.keys(notes).forEach(function(id){
    var options = notes[id];
    if(maxZIndex

6. 저장

생성 시 저장

$('#create').addEventListener('click',function(e){
        var note = new createNote({
            left:Math.round(Math.random()*(window.innerWidth - 220)),
            top:Math.round(Math.random()*(window.innerHeight - 320)),
            zIndex: maxZIndex++,                
        });
        note.save();
 });

현재 입력 시간 및 내용 저장

var editor = $('.editor',this.note);
var inputTimer;
var inputHandler =  function (e){           
    var content = editor.innerHTML;         
    clearTimeout(inputTimer);
    inputTimer = setTimeout(function (){
        var time = Date.now()
        store.set(this.note.id,{
            content:content,
            updateTime:time
        });
        this.updateTime(time);
    }.bind(this),300);
}.bind(this);   
editor.addEventListener('input',inputHandler);

createNote.prototype.save = function (){
        store.set(this.note.id,{
            left:this.note.offsetLeft,
            top:this.note.offsetTop,
            zIndex:parseInt(this.note.style.zIndex),
            content:$('.editor',this.note).innerHTML,
            updateTime:this.updateTimeInMS
        });
    }

mousedown 때 z-index 값을 저장합니다.

if(parseInt(moveNote.style.zIndex)!==maxZIndex - 1){
        moveNote.style.zIndex = maxZIndex++;
        store.set(moveNote.id,{
            zIndex:maxZIndex-1
        });
    }

mouseuop에서 새 left와 top 값을 저장합니다.

store.set(moveNote.id,{
        left:moveNote.offsetLeft,
        top:moveNote.offsetTop
    });

요약: DOM, 이벤트, 원형, 객체 지향, 모듈식 지식 습득
모든 견지는 부드럽게 대할 수 있다!