显示页面时，浏览器中会发生很多事情：用户点击按钮、代码从网络请求的额外数据会到达、定时器可能到期。即按钮点击事件、数据到达事件、时间到期事件。
表单填写：
<form>
<input type="text" id="songTextInput" size="40" placeholder="song name">
<input type="button" id="addButton" value="add song">
</form>
为按钮指定一个事件：
var button = document.getElementById("addButton");
button.onclick = handleButtonClick;
取得表单域中输入的文本：
var textInput = document.getElementById("songTextInput");
var songName = textInput.value;
创建一个新元素：
var li = document.createElement("li");//传入createElement的li是元素的类型
li.innerHTML = songName;//给li元素增加文本内容
向DOM增加新元素：
var ul = document.getElementById("playlist");
ul.appendChild(li);//让ul增加li元素作为它的一个子元素
本地存储音乐播放清单：
localStorage.setItem("playlist", JSON.stringify(playlistArray));
本地存储中取出播放清单：
function getStoreArray(key) {
var playlistArray = localStorage.getItem(key);
if (playlistArray == null || playlistArray == "") { playlistArray = new Array(); }
else { playlistArray = JSON.parse(playlistArray); }
return playlistArray；}// {}的格式完全是为了节省版面，勿参考
相关源码：
playlist.js
playlist_store.js
彩蛋-浏览器中查看/编辑本地存储的cookie
步骤：
<F12>键 -> Application -> Storage - localStorage - file:// ，即可查看键值对
右键点击 键值对 的“value”，即可删除/修改本地存储的键值对
chrome中本地存储的键值对TIPS：本文只是个人对过去的总结，不保证简洁性、系统性、易懂性。如需交流：zhejiangdaxue2011(微信号）