すみませんコードの張り方がわからず 変な風になってしまいました、  
ご教示いただけると幸いです

```

    <!DOCTYPE html>
    <html lang="ja">
        <head>
            <meta charset="utf-8">
            <title>やることリスト</title>
            <link rel="stylesheet" href="todo.css">
        <body>
            <div id="container">
                 <h1>やることリスト</h1>
                 <input type="text" id="text_name">
                 <input type="button" value="追加" onclick="add()">
                 <ul id="todoList"></ul>
            </div>
            <script>
                window.onload = function() {
                    box = localStorage.getItem('key');
                    for (var i =0; i < box.length; i++) {
                        var li = document.createElement('li');
                        li.textContent = box[i]
                        document.getElementById('todoList').appendChild(li);
                    }
                }
                function add() {
                    var box = [];
                    var input = document.getElementById("text_name");
                    box.push(input.value);
    
                    localStorage.setItem('key', box);
    
                    for (var i =0; i < box.length; i++) {
                        var li = document.createElement('li');
                        li.textContent = box[i]
                        document.getElementById('todoList').appendChild(li);
                    }
                }
            </script>
        </body>
    </html>
    
```
CC BY-SA 4.0
2020-10-29T10:43:44.170
71593
2020-10-29T11:50:22.140
2020-10-29T11:50:22.140
3060
42529
question
javascript html css
todoのデータが消えてしまう　localstorage