这次做项目有一些简单设置，说不用后台给接口，让做在本地，用本地存储，，所以现
学习了本地存储 了。。
其实还是蛮简单的。
讲解的目录：
1，cookie
2，cookie的特点
3，storage
4，storage的特点
5，storage API
1，cookie：
数据存储到计算机中，通过浏览器控制添加与删除数据。
2，cookie的特点：
存储限制（一域名100个cookie，每组值大小4KB）
客户端，服务器端，都会请求服务器（头信息）
页面间的cookie是共享
3，storage：
sessionStorage
session临时回话，从页面打开到页面关闭的时间段，
窗口的临时存储，页面关闭，本地存储消失
localStorage
永久存储（可以手动删除数据）
4，storage的特点：
存储量限制（5M）
客户端完成，不会请求服务器处理
sessionStorage数据不共享，localStorage共享
5，storage API
setItem();设置数据，key/value类型，类型都是字符串。。可以用获取属性的形式操作
getItem(); 获取数据，通过key来获取到相应的value
removeItem(); 删除数据，通过key来删除相应的value
clear(); 删除全部存储的值
简单的设置获取例子：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script>
window.onload = function(){
var aInput = document.getElementsByTagName('input');
aInput[0].onclick = function(){
//sessionStorage : 临时性存储
//localStorage : 永久性存储
//window.sessionStorage.setItem('name',aInput[3].value);
window.localStorage.setItem('name',aInput[3].value);
};
aInput[1].onclick = function(){
//alert(window.sessionStorage.getItem('name'));
alert(window.localStorage.getItem('name'));
};
aInput[2].onclick = function(){
window.localStorage.removeItem('name');
//window.localStorage.clear(); //删除全部数据
};
};
</script>
</head>
<body>
<input type="button" value="设置" />
<input type="button" value="获取" />
<input type="button" value="删除" />
<input type="text" />
</body>
</html>
注册信息时没有保存关了浏览器数据不消失
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script>
window.onload = function(){
var aInput = document.getElementsByTagName('input');
var oT = document.getElementById('t1');
if( window.localStorage.getItem('name') ){
aInput[0].value = window.localStorage.getItem('name');
}
if( window.localStorage.getItem('sex') ){
for(var i=1;i<aInput.length;i++){
if( aInput[i].value == window.localStorage.getItem('sex') ){
aInput[i].checked = true;
}
}
}
if( window.localStorage.getItem('ta') ){
oT.value = window.localStorage.getItem('ta');
}
window.onunload = function(){
if( aInput[0].value ){
window.localStorage.setItem('name', aInput[0].value);
}
for(var i=1;i<aInput.length;i++){
if( aInput[i].checked == true ){
window.localStorage.setItem('sex', aInput[i].value);
}
}
if( oT.value ){
window.localStorage.setItem('ta', oT.value);
}
};
};
</script>
</head>
<body>
<p>
用户名:<input type="text" />
</p>
<p>
性别 : <input type="radio" value="男" name="sex" />男
<input type="radio" value="女" name="sex" />女
</p>
内容 : <textarea id="t1">
</textarea>
</body>
</html>
存储事件：
当数据有修改或者删除的情况下，就会触发storage事件
在对数据进行改变的窗口对象上是不会触发的
key：修改或删除的key值，如果调用clear(),key为null
newValue：新设置的值，如果调用removeStorage(),key为null
oldValue：调用改变前的value值
storageArea：当前的storage对象
url：触发该脚本变化的文档的url
注：session同窗口才可以，例子，iframe操作
例子：当前页面不会触发，在新开页面触发
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script>
window.onload = function(){
var aInput = document.getElementsByTagName('input');
aInput[0].onclick = function(){
window.localStorage.setItem('name',aInput[3].value);
};
aInput[1].onclick = function(){
alert(window.localStorage.getItem('name'));
};
aInput[2].onclick = function(){
window.localStorage.removeItem('name');
};
window.addEventListener('storage',function(ev){ //当前页面的事件不会触发
//alert(123);
console.log( ev.key );
console.log( ev.newValue );
console.log( ev.oldValue );
console.log( ev.storageArea );
console.log( ev.url );
},false);
};
</script>
</head>
<body>
<input type="button" value="设置" />
<input type="button" value="获取" />
<input type="button" value="删除" />
<input type="text" />
</body>
</html>
例子：同步购物车
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script>
window.onload = function(){
var aInput = document.getElementsByTagName('input');
for(var i=0;i<aInput.length;i++){
aInput[i].onclick = function(){
if(this.checked){
window.localStorage.setItem('sel',this.value);
}
else{
window.localStorage.setItem('onSel',this.value);
}
};
}
window.addEventListener('storage',function(ev){ //当前页面的事件不会触发
if( ev.key == 'sel' ){
for(var i=0;i<aInput.length;i++){
if( ev.newValue == aInput[i].value ){
aInput[i].checked = true;
}
}
}
else if( ev.key == 'onSel' ){
for(var i=0;i<aInput.length;i++){
if( ev.newValue == aInput[i].value ){
aInput[i].checked = false;
}
}
}
},false);
};
</script>
</head>
<body>
<input type="checkbox" value="香蕉" />香蕉<br />
<input type="checkbox" value="苹果" />苹果<br />
<input type="checkbox" value="西瓜" />西瓜<br />
<input type="checkbox" value="哈密瓜" />哈密瓜<br />
</body>
</html>
可以把例子考过去试试，，很实用哟
对浏览器版本又要求哟，，
相关推荐
今天突发奇想，如果能用HTML5本地存储实现，就会大大增高程序效率。当然，HTML5 本地存储涉及到各个浏览器的兼容性，涉及存储数据的大小(NKB)等问题。在这儿需要说明的是：如果你做一个不大不小的微商城项目，那么你...
HTML5本地存储之数据库
HTML5本地存储不完全指南 HTML5 本地存储
用HTML5 本地存储方案做的一个公告展示模块
HTML5 LocalStorage和UserData实现兼容多浏览器的本地存储
shinyStore, R 软件包，将HTML5本地存储支持添加到 Shiny shinyStoreshinyStore 包使得闪亮的应用开发者可以利用HTML5本地存储在用户的浏览器中存储持久的。同步的数据。安装你可以以使用 of R 包安装代码的最新开发...
一个本地数据库（Web SQL Database）实现的通信录；介绍怎样创建打开数据库，创建表，添加数据，更新数据，删除数据，删除表 等等。
html5-本地存储,哈哈，希望对喜爱html5的同学有帮助啊！
本文实例讲述了JS+HTML5本地存储Localstorage实现注册登录及验证功能。分享给大家供大家参考，具体如下： 源码引用的js、jquery都是在线的，代码拷到本地就能运行 登录： <html ng-app="ionicApp"> <head...
HTML5 的本地存储 API 中的 localStorage 与 sessionStorage 在使用方法上是相同的，区别在于 sessionStorage 在关闭页面后即被清空，而 localStorage 则会一直保存。我们这里以 localStorage 为例，简要介绍下 ...
本地存储（localStorage && sessionStorage） 离线缓存（application cache） indexedDB 和 webSQL 2、localStorage && sessionStorage 过期时间：localStorage 永久存储，永不失效除非手动删除 ...
本例详细演示了数据库创建 表格创建 数据增删查改 删除表格各种功能
HTML5的本地存储：localStorage,sessionStorage及storage的监听器
主要介绍了HTML5本地存储和本地数据库实例详解,需要的朋友可以参考下
利用HTML本地 本地数据库 将原本要保存在服务器端的数据转移到了客户端
在上一篇《HTML5本地存储之Web Storage篇》中，简单介绍了如何利用localStorage实现本地存储；实际上，除了sessionStorage和localStorage外，HTML5还支持通过本地数据库进行本地数据存储，HTML5采用的是SQLLite这种...
NULL 博文链接：https://liuna718-163-com.iteye.com/blog/2178433