drag and drop & save in to localStorage example

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>Drag & Drop Images</title>
    <style>
        #dropbox {
            width: 300px;
            height: 300px;
            border: 1px solid #888;
            margin: 5px;
        }
        #imglist img {
            width: 100px;
            height: 100px;
            margin: 5px;
        }
    </style>
</head>
<body>
    <div class="wrap">
        <div>
            <button onclick="init()">초기화</button>
            <button onclick="location.reload()">새로고침</button>
        </div>
        <div id="dropbox" ondrop="drop(event)" ondragover="dragover(event)" ondragleave="dragleave(event)">
            Drop Images Here
        </div>
        <div id="imglist"></div>
    </div>
    <script src="http://code.jquery.com/jquery-latest.js"></script>
    <script>
        var imagedata = [];
        function drop(e){
            e.preventDefault();
            var data = e.dataTransfer;
            var files = data.files;

            if( files ) {
                for(i=0;i<files.length;i++){
                    if( files[i].type == "image/jpeg" || files[i].type == "image/gif" || files[i].type == "image/png") {
                        addimages(files[i]);
                    }
                }
            }
        }

        function addimages(file){
            var reader = new FileReader();
            reader.addEventListener("load",function(){
                var tmpimg = "<img src='" + reader.result + "'>";
                $("#imglist").append(tmpimg);
                imagedata.push(reader.result);
                localStorage.setItem("imagedata",JSON.stringify(imagedata));
            },false);
            if( file ) reader.readAsDataURL(file);
        }

        function dragover(e){
            e.preventDefault();
            var tagetId = e.target.id;  document.getElementById(tagetId).style.background = "pink";
        }

        function dragleave(e){
            e.preventDefault();
            var tagetId = e.target.id;  document.getElementById(tagetId).style.background = "white";
        }

        window.onunload = function(){
            //do something
        }

        window.onload = function(){
            var imagedataload = localStorage.getItem("imagedata");
            if( imagedataload ) {
                var imgarr = JSON.parse(imagedataload);
                for( i=0; i<imgarr.length; i++){
                    var tmpimg = "<img src='" + imgarr[i] + "'>";
                    $("#imglist").append(tmpimg);
                    imagedata.push(imgarr[i]);
                }
            }
        }

        function init(){
            while (imagedata.length) { imagedata.pop(); }
            localStorage.removeItem("imagedata");
            $("#imglist").html("");
        }
    </script>
</body>
</html>