HTML5 – 本地存储

移动开发
HTML5 Web Storage API 让在本地存储数据成为了可能,而且可以存储 5M 的数据,这 5M 的空间可供一个域任意使用。注意是一个域,这也就是说所保存的数据是不可跨域访问的。

HTML5 Web Storage API 让在本地存储数据成为了可能,而且可以存储 5M 的数据,这 5M 的空间可供一个域任意使用。注意是一个域,这也就是说所保存的数据是不可跨域访问的。

我一向喜欢在实践中学习新的知识,今天也不例外,我利用 loalStorage 做了一个便签小应用,数据存放在浏览器中。 

怎么样,还不错吧?下面就用这个例子的开发流程来介绍 localStorage 吧!

起步

在这里,我就不在粘贴 HTML 和 CSS 代码了,如果你想在本地运行这个例子,我将在文章末尾给出源码下载地址。

首先,我想讲讲该怎么创建这么一个便签,它的具体过程应该像下面这样。

  1. 获取用户输入的内容
  2. 获取便签的等级,这个是在 <select> 中选择的。
  3. 将内容和等级保存在一个对象中,利用 JSON 转换为字符串。
  4. 生成一个 key, 用于保存数据,为了查找方便,创建一个数组,单独来存储 key, 当然这个数组也利用 JSON 转换成字符串。
  5. 使用 localStorage 的 setItem() 方法保存便签对象和 key数组字符串。
  6. 将标签添加到 DOM 结构。

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

  1. function createNote() { 
  2.     var noteElement = document.getElementById("note"); 
  3.     var noteValue = noteElement.value; 
  4.     noteElement.value = ""
  5.  
  6.     var levelObj = document.getElementById("note-level"); 
  7.     var index = levelObj.selectedIndex; 
  8.     var level = levelObj[index].value; 
  9.  
  10.     var noteObj = { 
  11.         "value": noteValue, 
  12.         "level"level 
  13.     } 
  14.  
  15.     var date = new Date(); 
  16.     var key = "note_" + date.getTime(); 
  17.     localStorage.setItem(key, JSON.stringify(noteObj)); 
  18.  
  19.     var notesArray = getNotesArray(); 
  20.     notesArray.push(key); 
  21.     localStorage.setItem("notesArray", JSON.stringify(notesArray)); 
  22.  
  23.     addNoteToDOM(key, noteObj); 
  24.  

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

  1. localStorage.setItem("my_num",10); 

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

  1. var num = parseInt(localStorage.getItem("my_num")); 

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

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

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

  1. function getNotesArray() { 
  2.     var notesArray = localStorage.getItem("notesArray"); 
  3.  
  4.     if (!notesArray) { 
  5.         notesArray = []; 
  6.         localStorage.setItem("notesArray", JSON.stringify(notesArray)); 
  7.     } else { 
  8.         notesArray = JSON.parse(notesArray); 
  9.     } 
  10.  
  11.     return notesArray; 
  12.  

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

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

  1. function addNoteToDOM(key, noteObj) { 
  2.     var notes = document.getElementById("note-list"); 
  3.     var note = document.createElement("li"); 
  4.     note.setAttribute("id"key); 
  5.     note.onclick = deleteNote; 
  6.  
  7.     var value = noteObj.value; 
  8.     note.innerHTML = value; 
  9.  
  10.     var level = noteObj.level
  11.     note.setAttribute("class"level); 
  12.     notes.appendChild(note); 
  13.  

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

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

  1. function deleteNote(e) { 
  2.     var key = e.target.id; 
  3.     localStorage.removeItem(key); 
  4.     var notesArray = getNotesArray(); 
  5.  
  6.     for (var i = 0; i < notesArray.length; i++) { 
  7.         if (key === notesArray[i]) { 
  8.             notesArray.splice(i, 1); 
  9.         } 
  10.     } 
  11.     localStorage.setItem("notesArray", JSON.stringify(notesArray)); 
  12.  
  13.     deleteNoteFromDOM(key); 
  14.  

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

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

拓展

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

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

  1. if (window["localStorage"]) { 
  2.     // your logic code 
  3.  
责任编辑:庞桂玉 来源: Android开发中文站
相关推荐

2015-05-22 10:06:58

2015-08-13 15:56:44

HTML5本地存储Localstorag

2019-05-29 19:00:35

HTML5存储方式前端

2012-12-03 13:53:38

IBMdW

2012-02-20 13:45:26

HTML5移动开发程序

2009-05-08 13:46:38

JavaScriptHTML5离线存储

2018-05-30 08:54:00

离线存储HTML5

2013-01-24 10:26:04

HTML5HTML 5HTML5的未来

2013-10-21 15:24:49

html5游戏

2011-05-13 17:36:05

HTML

2012-04-24 10:08:12

HTML5

2011-05-12 15:42:16

HTML5

2023-03-16 09:00:00

HTML5HTML语言

2011-05-13 17:41:40

2011-01-14 17:53:33

HTML5cssweb

2013-03-22 08:59:57

HTML5移动应用Web App

2014-03-20 10:50:44

HTML5 定位技术

2014-12-30 17:13:51

HTML5

2013-03-27 09:50:53

HTML5游戏Android开发

2011-04-25 10:36:39

HTML5
点赞
收藏

51CTO技术栈公众号