扣丁学堂HTML5培训本地存储之便签Demo详解

2017-12-28 11:11:21 678浏览

       在现如今，大多数程序员对HTML5 Web Storage API能够让在本地存储数据成为了可能，而且可以存储5M的数据，这5M的空间可供一个域任意使用。注意是一个域，这也就是说所保存的数据是不可跨域访问的。比如大多人喜欢在实践中学习新的知识，今天也不例外，我利用loalStorage做了一个便签小应用，数据存放在浏览器中。下面就用这个例子的开发流程来介绍localStorage吧!

       首先，我想讲讲该怎么创建这么一个便签，它的具体过程应该像下面这样。获取用户输入的内容、获取便签的等级，这个是在<select>中选择的。将内容和等级保存在一个对象中，利用JSON转换为字符串。生成一个key，用于保存数据，为了查找方便，创建一个数组，单独来存储key，当然这个数组也利用JSON转换成字符串。使用localStorage的setItem()方法保存便签对象和key数组字符串，将标签添加到DOM结构。

       按照上述流程，可以编写下面的代码：

       functioncreateNote(){

       varnoteElement=document.getElementById("note");

       varnoteValue=noteElement.value;

       noteElement.value="";

       varlevelObj=document.getElementById("note-level");

       varindex=levelObj.selectedIndex;

       varlevel=levelObj[index].value;

       varnoteObj={

       "value":noteValue,

       "level":level

       }

       vardate=newDate();

       varkey="note_"+date.getTime();

       localStorage.setItem(key,JSON.stringify(noteObj));

       varnotesArray=getNotesArray();

       notesArray.push(key);

       localStorage.setItem("notesArray",JSON.stringify(notesArray));

       addNoteToDOM(key,noteObj);

       }

       值得注意的是，localStorage只能保存字符串的值，所以我们在这里才不得不使用JSON将其转换成字符串。你可以使用下属代码存储一个整数或者浮点数。

       localStorage.setItem("my_num",10);

       这行代码确实可以运行，那是因为JS自动将其转换成了字符串，所以如果你想取出一个整数，你不得不进行转换，就像下面这样。

       varnum=parseInt(localStorage.getItem("my_num"));

       上面的代码中，使用了两个自定义的函数，那就是getNotesArray()和addNoteToDOM()，根据名字可以很容易判断出它们的功能。不过让人费解的是，我们为什么要专门使用一个数组去保存key呢？

       有一点你需要知道，在实际的网站中，你不可能只存储便签吧？你还需要存储很多其它的数据，如果保存了大量的其它数据，那么寻找便签就是一项十分耗时的任务了。我为什么要寻找便签？

       如果你的用户关掉了浏览器，然后又重新打开了这个网站怎么办呢？这个时候我们就不得不去寻找便签了。好了，下面来看看getNotesArray()函数吧。

       functiongetNotesArray(){

       varnotesArray=localStorage.getItem("notesArray");

       if(!notesArray){

       notesArray=[];

       localStorage.setItem("notesArray",JSON.stringify(notesArray));

       }else{

       notesArray=JSON.parse(notesArray);

       }

       returnnotesArray;

       }

       利用localStorage.getItem()去获取这个数组，如果这个数组不存在就创建一个，然后将其转换成字符串保存起来，如果数组已经存在，那就将其从字符串转成数组。总之，要返回一个数组，供我们使用。

       好了，大概已经知道了，下面就是addNoteToDOM()函数了，这个函数就更简单啦，下面来看看。

       functionaddNoteToDOM(key,noteObj){

       varnotes=document.getElementById("note-list");

       varnote=document.createElement("li");

       note.setAttribute("id",key);

       note.onclick=deleteNote;

       varvalue=noteObj.value;

       note.innerHTML=value;

       varlevel=noteObj.level;

       note.setAttribute("class",level);

       notes.appendChild(note);

       }

       首先，需要解释一点，#note-list是一个<ul>元素，而且我们的便签也都是由其子元素<li>组成的。接下来就简单了，我们将值赋给<li>，然后根据标签的等级为其添加不同的背景颜色，这里是通过为其设置class来达到这一目的。

       值得注意的是，这里我们将key作为参数传递进来了，而且利用key的值为<li>设置了id属性，这是为了达到删除的目的，毕竟我们不能只创建标签而不知道如果删除吧，所以在这里还为<li>设置了点击事件。

       functiondeleteNote(e){

       varkey=e.target.id;

       localStorage.removeItem(key);

       varnotesArray=getNotesArray();

       for(vari=0;i<notesArray.length;i++){

       if(key===notesArray[i]){

       notesArray.splice(i,1);

       }

       }

       localStorage.setItem("notesArray",JSON.stringify(notesArray));

       deleteNoteFromDOM(key);

       }

       当<li>元素被点击，就会传进来一个event对象，通过target就可以获得触发事件的对象，我们获取到这个对象的id，将其从DOM删除。

       不过这个不是重点，删除标签，意味着，我们还需要将其从本地存储中将其值删除，而且要把它从key数组中除名，我们用removeItem和splice()来大到了这一目的。


       上面，我们已经把localStorage的使用讲解完毕了，而且上面的代码包含了便签应用的核心代码。值得一提的是，还有一个sessionStorage，它的使用和localStorage完全相同，唯一不同的是，一旦浏览器窗口关闭，保存的数据将会被全部删除。

       当然，这是HTML5中的属性，所以我们在使用的时候需要进行检测，可以使用下面的代码检测浏览器是否支持localStorage。

       if(window["localStorage"]){

       //yourlogiccode

       }

       以上就是关于扣丁学堂HTML5培训之HTML5本地存储之便签Demo的详细介绍，最后想要学习HTML5的小伙伴可以选择口碑良好的扣丁学堂进行学习，扣丁学堂有专业的老师和与时俱进的课程体系，还有大量的HTML5视频教程供学员观看学习，想要高薪快速就业的小伙伴抓紧时间行动吧。扣丁学堂H5技术交流群：559883758。

【关注微信公众号获取更多学习资料】

查看更多关于“HTML5开发技术资讯”的相关文章>>