在HTML5出现之前，如果开发者需要在客户端存储少量的数据，只能通过cookie来实现，但是cookie存在几个不足点：
- 每个域名下cookie的大小限制在4KB。
- cookie会包含在每个http请求中，这样会导致发送重复的数据。
- cookie在网络传输过程中没有加密，存在安全隐患。
在HTML5新增了Web storage功能，Web Storage官方建议为每个网站是5MB，能存储比cookie更多的数据，并且具有比cookie更强大的功能。Web Storage现在已经得到了Firefox、Opera、Chrome、Safari各主流浏览器的支持。
Web Storage简介
Web Storage又分为Session Storage和Local Storage：
Session Storage：与session类似，Session Storage保存的数据生存期限与Session期限相同，用户Session结束时，Session Storage保存的数据也就消失了。
Local Storage： Local Storage保存的数据一直在本地，除非用户或程序显式地清楚，否则这些数据会一致存在。
window对象中提供了sessionStorage和localStorage两个属性，这两个属性分别代表了Session Storage和Local Storage。这个两个功能和用法几乎是相同的，只是它们保存数据的生存期限不同而已。storage提供了以下属性和方法（以localStorage为例）：
- localStorage.length：获取key-value对的数目；
- localStorage.key(index)：获取第index索引的key；
- localStorage.getItem(key)：获取指定key对应的value；
- localStorage.setItem(key,value)：保存指定的key-value对；
- localStorage.removeItem(key)：删除指定key对应的key-value对；
- localStorage.clear()：删除所有key-value对。
需要注意的是，key和value都必须为字符串，换言之，web Storage的API只能操作字符串。那么一些不是字符串的数据，我们可以通过JSON等方式将其转化成字符串格式后在操作。
Web Storage用JSON存储多个数据
我们通过一个小程序来熟悉一下相关属性和方法的基本用法：
- 录入学生的基本信息（包括学号，姓名，年级，性别），以学号为key值来存储到local storage中；
- 通过学号来查询学生的基本信息；
- 显示全部学生的信息；
首先我们设计HTML页面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML本地存储之web storage</title>
<style type="text/css">
#content{
border: 1px solid #3D19DD;
width:600px;
text-align:center;
padding: 10px 0;
margin: 0 auto;
}
#content input
最低0.47元/天 解锁文章
1974
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
