프런트엔드 실습 - 메모 시스템 (아래)
//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, 이벤트, 원형, 객체 지향, 모듈식 지식 습득
모든 견지는 부드럽게 대할 수 있다!
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
다양한 언어의 JSONJSON은 Javascript 표기법을 사용하여 데이터 구조를 레이아웃하는 데이터 형식입니다. 그러나 Javascript가 코드에서 이러한 구조를 나타낼 수 있는 유일한 언어는 아닙니다. 저는 일반적으로 '객체'{}...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.