目录
- WebStorage介绍
- 使用WebStorage中的API
1. 什么是Web Storage
在HTML5中，除了新增canvas元素之外，还新增的非常重要的功能是可以在客户端本地保存数据的WebStorage功能。Web应用的发展，使得客户端存储功能使用得越来越多，而实现客户端存储的方式则是多种多样。最简单而且兼容性最佳的方案就是cookies，单数作为真正的客户端存储，cookies是存在一些不足的:
-
大小:cookies的大小被限制在4KB
-
宽带：cookies是随HTTP事务一起发送的，因此会浪费一部分发送cookies时使用的宽带。
-
复杂:cookies操作起来是标胶麻烦:所有的信息要被拼到一个长字符串里面。
-
联系:对cookies来说，在相同的站点与多事务处理保持联系不是很容易。
在这种情况下，在HTML5中重新提供了在客户端本地保存数据的功能，它就是WebStroge功能。
顾名思义，WebStorage功能就是在Web上存储数据的功能，而这里的存储，是针对客户端本地而言的。它包含两种存储类型：sessionStorage和localStroage二者都支持在同域下存储5MB数据，与cookies相比有着明显的优势。
1.1 sessionStorage
将数据保存在session对象中。所谓session,是指用户在浏览某个网站时，从进入网站到浏览器关闭所经过的这段时间，即浏览这个网站所花费的事件。session对象可以用来保存在这段时间内索要保存的任何数据。
1.2 localStroage
将数据保存在客户端本地的硬件设备中，即使关闭了浏览器，改数据仍然存在，下次打开浏览器访问网站仍然可以继续使用。这两种不同的存储类型区别在于,sessionStorage为临时存储，而localStoage为永久保存。
2. WebStorage中的API
| API | 描述 |
|---|---|
| length | 获取当前WebStorage中的数目 |
| key | 返回WebStorage中的第N个存储条目 |
| getItem(key) | 返回指定key的存储内容，如果不存在则返回null。注意,返回的类型是字符串类型 |
| setItem(key,value) | 设置指定key的内容的值为value |
| removeItem(key) | 根据指定的key，删除键值为key的内容 |
| clear | 清空webStorage的内容 |
2.1 数据的存储与获取
- 在localStorage中设置键值对可以用 setItem() 进行设置
localStorage.setItem("key","value")
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>数据的存储与获取</title>
</head>
<body>
<script type="text/javascript">
//设置存储数据的键值对 key和value 的名字都是自定义的 注意：value的值一定要是字符串或数字
localStorage.setItem("这是key","这是value值")
</script>
</body>
</html>
F12或者右键检查打开谷歌浏览器的控制台，找到Application 点击Local Storage就可以看到上面设置
- 在localStorage获取数据可以用getItem()
var val = localStroage.getItem("key")
当然也可以直接使用localStorage的key方法，而不使用setItem()和getItem()，代码如下:
localStroage.key = "value"
var val = localStroage.key
demo:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>数据的存储与获取</title>
</head>
<body>
<script type="text/javascript">
//设置存储数据的键值对 key和value 的名字都是自定义的 注意：value的值一定要是字符串或数字
localStorage.setItem("这是key","这是value值")
//获取设置的key值
var getValue = localStorage.getItem("这是key")
console.log(getValue) //输出 这是value值
</script>
</body>
</html>
2.2 数据的删除和清空
- removeItem() 用于Stroage列表删除指定数据
var val = localStroage. removeItem(key)
- clear()方法用于清空整个列表的所有数据
localStroage.clear()
2.3 JSON对象存储
虽然HTML5 Web Storage 规范允许将任意的类型的对象保存为键/值对的形式，实际情况却是一些浏览器将数据限定为文本字符串类型。不过，既然主流的浏览器原生支持JSON，就解决了这个问题。JSON格式是JavaScript Object Notation的缩写。
JSON是一种将对象和字符串可以相互表示的数据转换标准。JSON一直是通过HTTP将对象从浏览器传送到服务器一种常用格式。现在，可以通过序列化对象将JSON数据保存在Storage中，以实现复杂数据类型的持久化。
1. var str = JSON.stringify(data)
该参数接受一个参数data,该参数表示要转换成JSON格式文本数据的对象。这个方法的作用是将对象转换成JSON格式的文本数据，并将其返回。
2.var str = JSON.parse(str)
该参数接受一个参数str，此参数表示从localStorage中取得的数据，该方法的作用是将传入的数据转换成json对象，并且返回。
练习
练习1：历史记录存储
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>历史记录</title>
<script src="../js/jquery-1.11.0.js"></script>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.content{
width: 520px;
margin: 20px auto;
}
.header,.body,.footer{
margin-top: 25px;
}
.content input{
padding: 6px 12px;
border: 1px solid #ddd;
outline: none;
box-shadow: 2px 2px 4px #ddd;
}
.content .btn{
padding: 5px 12px;
border: 1px solid #1E9FFF;
background: #1E9FFF;
color: #fff;
}
.body ul li{
list-style: none;
margin-top: 15px;
padding: 6px 12px;
min-width: 60px;
border: 1px solid #ddd;
float: left;
margin-right: 10px;
text-align: center;
box-shadow: 2px 2px 4px #ddd;
}
.body ul li:hover{
transition: 0.5s;
background: #ddd;
}
.body ul li a{
text-decoration: none;
color: #666;
}
.footer a{
color: #D43F3A;
text-decoration: none;
}
.footer a:hover{
text-decoration: underline;
}
.claer{
clear: both;
}
</style>
</head>
<body>
<div class="content">
<div class="header">
<input type="text" name="search" id="search" placeholder="请输入关键字"/>
<button type="button" class="btn">搜索</button>
</div>
<div class="body">
<h3>历史记录</h3>
<ul>
<!--<li><a href="javascript:;">11111</a></li>
<li><a href="javascript:;">1111111111111111111111</a></li>-->
</ul>
<div class="claer"></div>
</div>
<div class="footer">
<a href="javascript:;">清除记录</a>
</div>
</div>
<script type="text/javascript">
$(function(){
//获取本地存储的数据
var gTxt = JSON.parse(localStorage.getItem("searchData")) || [];
if(gTxt.length>0){
var str = '';
for (var i=0;i<gTxt.length;i++) {
str+='<li><a href="javascript:;">'+gTxt[i]+'</a></li>'
}
$(".body ul").append(str);
}
//本地存储数据
$(".btn").click(function(){
var textSer = $("#search").val();
for (var i=0;i<gTxt.length;i++) {
if(gTxt[i]==textSer){
return
}
}
gTxt.push(textSer);
//本地存储
localStorage.setItem("searchData",JSON.stringify(gTxt));
$("#search").val("");
})
//清除记录
$(".footer a").click(function(){
localStorage.clear()
$(".body ul li").remove()
})
})
</script>
</body>
</html>
练习2：简单的todolist
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>todo</title>
<script src="../js/jquery-1.11.0.js"></script>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.container{
width: 520px;
margin: 20px auto;
padding: 5px;
border: 1px solid #ddd;
box-shadow: 2px 2px 4px #ddd;
line-height: 2.2;
}
textarea{
width: 97%;
height: 150px;
resize: none;
padding: 5px;
outline: none;
}
.btn{
padding: 6px 12px;
background: #1E9FFF;
border: 1px solid #1E9FFF;
color: #fff;
}
ul li{
list-style: none;
border: 1px solid #ddd;
padding: 0px 5px;
box-shadow: 2px 2px 4px #ddd;
margin-bottom: 15px;
}
ul li:hover{
transition: 0.9s;
background: #E7E7E7;
}
</style>
</head>
<body>
<div class="container">
<textarea name="todo" rows="" cols=""></textarea>
<button class="btn add">添加</button>
代办：<strong class="wait">0</strong>
完成：<strong class="done">0</strong>
<hr />
<h4>代办</h4>
<ul class="wait-list">
<!–<li>11111</li>–>
</ul>
<h4>完成</h4>
<ul class="done-list">
<!–<li>1111111</li>–>
</ul>
</div>
<script>
$(function(){
//读取代办的长度
$(".wait").html(localStorage.length)
//读取数据
for (var i=0;i<localStorage.length;i++) {
var oLi = $("<li></li>"),
key = localStorage.key(i),
val = localStorage[key];
oLi.attr("data-hex",key);
oLi.html(val)
$(".wait-list").append(oLi)
}
//添加
var oDate = null;
$(".add").click(function(){
var oValue = $("textarea").val(),
times = new Date(),
oLi = $("<li>"+oValue+"</li>")
oDate = new Date().toLocaleString()
oLi.attr("data-hex",oDate)
localStorage.setItem(oDate,oValue)
$(".wait-list").append(oLi)
$("textarea").val("")
$(".wait").html(localStorage.length)
})
//完成
$(document).on("click",".wait-list li",function(){
$(this).clone(true).appendTo(".done-list")
$(this).remove()
localStorage.removeItem($(this).data("hex"))
$(".wait").html(localStorage.length)
$(".done").html($(".done-list li").length)
})
})
</script>
</body>
</html>
练习3：todolist
<!DOCTYPE html>
<html>
<head>
<meta charset=”UTF-8″>
<title></title>
<script type=”text/javascript” src=”js/jquery-1.11.0.js” ></script>
<style>
*{
margin: 0;
}
em{
font-style: normal;
}
textarea{
resize: none;
outline: none;
height: 200px;
width:100%;
}
.container{
width: 500px;
margin: 20px auto;
border-radius: 4px;
border: 1px solid #ddd;
padding: 10px;
}
.container .header{
height: 250px;
width: 100%;
}
.header-footer{
height: 20px;
}
.header-footer .btn{
float: right;
}
.list-item{
border: 1px solid #ddd;
padding: 10px;
margin-top: 10px;
position: relative;
cursor: pointer;
}
</style>
</head>
<body>
<div class=”container”>
<div class=”header”>
<textarea id=”text”></textarea>
<div class=”header-footer”>
<button class=”btn send”>发送</button>
</div>
</div>
<div class=”list”>
<div class=”list-header”>
<span class=”noDone”>待帮<em>0</em></span>
<span class=”done”>已完成<em>0</em></span>
</div>
<div class=”list-content”>
</div>
<div class=”list-footer”>
<h4>已完成</h4>
<!–<div class=”list-item”>
</div>–>
</div>
</div>
</div>
<script>
$(function(){
var arrNoDone = JSON.parse(localStorage.getItem(“arrNoDone”))||[]
var newArr = JSON.parse(localStorage.getItem(“newArr”))||[]
// console.log(newArr)
if(arrNoDone.length>0){
var noDone = arrNoDone.length
var str = “”
for (var i=0;i<arrNoDone.length;i++) {
str += ‘<div class=”list-item”>’+arrNoDone[i]+'</div>’
}
$(“.list-content”).append(str)
$(“.noDone em”).html(noDone)
}else{
var noDone = 0
}
if(newArr.length>0){
var done = newArr.length
var str = “”
for (var i=0;i<newArr.length;i++) {
str += ‘<div class=”list-item”>’+newArr[i]+'</div>’
}
$(“.list-footer”).append(str)
$(“.done em”).html(done)
}else{
var done = 0
}
$(“.send”).click(function(){
var oText = $(“#text”).val()
if(oText.length<0){
alert(‘不能为空’)
}else {
noDone++
arrNoDone.push(oText)
localStorage.setItem(“arrNoDone”,JSON.stringify(arrNoDone))
var str = ‘<div class=”list-item”>’+oText+'</div>’
$(“.list-content”).append(str)
$(“.noDone em”).html(noDone)
$(“#text”).val(“”)
}
})
$(document).on(“click”,”.list-item”,function(){
// alert(1)
noDone–
done++
var index = $(this).index()
var a = arrNoDone.splice(index,1)[0]
var dom = $(this).clone()
// console.log(a)
newArr.push(a)
localStorage.setItem(“arrNoDone”,JSON.stringify(arrNoDone))
localStorage.setItem(“newArr”,JSON.stringify(newArr))
$(this).remove()
$(“.noDone em”).html(noDone)
$(“.done em”).html(done)
$(“.list-footer”).append(dom)
})
})
</script>
</body>
</html>