Why does this work in jsfiddle but not in my document
<p>I found a wonderful jsfiddle that someone has made and wanted to use part of it in my project:</p>

<p><a href="http://jsfiddle.net/manuel/29gtu/" rel="nofollow">http://jsfiddle.net/manuel/29gtu/</a></p>

<p>It works on the jsfiddle but not in my HTML document. Here is what in my document:</p>

<pre><code>&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
&lt;script src="scripts/jquery-1.7.2.js"&gt;&lt;/script&gt;

&lt;script&gt;

$("button").click(function() {
    var id = $("#id").val();
    var text = "icon-"+id;
    // update the result array
    var result = JSON.parse(localStorage.getItem("result"));
    if(result == null)
        result = [];

    result.push({id: id, icon: text});
    // save the new result array
    localStorage.setItem("result", JSON.stringify(result));

    // append the new li
    $("#bxs").append($("&lt;li&gt;&lt;/li&gt;").attr("id", "item-"+id).html(text));
});

// on init fill the ul
var result = JSON.parse(localStorage.getItem("result"));
if(result != null) {
    for(var i=0;i&lt;result.length;i++) {
        var item = result[i];
        $("#bxs").append($("&lt;li&gt;&lt;/li&gt;").attr("id", "item-"+item.id).html(item.icon));
    }
}​

&lt;/script&gt;
&lt;/head&gt;

&lt;body&gt;
&lt;ul id="bxs" class="tabs"&gt; 
&lt;/ul&gt;

&lt;input type="text" id="id" /&gt;&lt;button&gt;save&lt;/button&gt;
&lt;/body&gt;
&lt;/html&gt;
</code></pre>

<p>The code is copied and pasted from the fiddle. I think it has to do with me not having a plugin for local storage. 
For that jsfiddle to work, do I need some external plugin that I am missing?</p>
