这次做项目有一些简单设置，说不用后台给接口，让做在本地，用本地存储，，所以现
学习了本地存储 了。。
其实还是蛮简单的。
讲解的目录：
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)作为HTML5标准的一部分，提供了强大的客户端数据存储能力。它允许网页应用在用户的浏览器上持久化存储数据，无需每次都从服务器...
HTML5本地存储是现代Web应用开发中的一个重要特性，它允许应用程序在用户的浏览器上存储大量数据，无需频繁地与服务器交互。Web SQL Database是HTML5本地存储的一种方式，它引入了一个完整的SQLite数据库系统，使得...
### HTML5的本地存储 #### 一、概述 HTML5 的本地存储技术是现代Web开发中一项非常重要的特性，它允许网页应用在用户的浏览器中存储数据。与传统的Cookie存储方式相比，HTML5本地存储提供了更丰富的功能和更大的...
shinyStore, R 软件包，将HTML5本地存储支持添加到 Shiny shinyStoreshinyStore 包使得闪亮的应用开发者可以利用HTML5本地存储在用户的浏览器中存储持久的。同步的数据。安装你可以以使用 of R 包安装代码的最新开发...
HTML5的本地存储机制扩展了Web应用程序的能力，使得开发者可以在用户浏览器中持久化地存储数据。在HTML5之前，Web应用程序依赖于Cookie来存储少量信息，但Cookie由于大小限制和性能原因并不适合大量数据的存储。...
HTML5的本地存储功能极大地增强了Web应用程序的能力，使得开发者能够在用户浏览器端持久地存储数据，无需服务器交互。本文主要探讨了HTML5中的两种本地存储形式——`localStorage`和`sessionStorage`，以及它们的...
HTML5的本地存储是Web应用程序离线运行的关键技术之一，其中Web SQL数据库是早期实现本地存储的方式之一。本文将深入探讨HTML5中的Web SQL数据库，包括它的创建、表格操作以及数据的增删查改。 首先，Web SQL数据库...
- "brianleroux-lawnchair-0.6.3-77-ged3ea57.zip" 和 "zefhemel-persistencejs-v0.2.4-101-gca38084.zip" 是两个流行的JavaScript库，它们抽象了HTML5本地存储接口，使得开发者可以更方便地进行数据操作。...
HTML5的本地存储技术是现代Web应用中一个重要的特性，其中IndexedDB是一个强大的、基于数据库的存储机制。这篇博文将深入探讨IndexedDB的核心概念、用途以及如何在实际项目中运用。 IndexedDB是一种非关系型数据库...
HTML本地存储，特别是HTML5中的localStorage和Web数据库（Database）技术，是现代Web应用中用于在客户端存储数据的重要工具。这些技术使得开发者可以将部分数据存储在用户的浏览器中，从而提高应用程序的性能，减少...
HTML5 的本地存储 API 中的 localStorage 与 sessionStorage 在使用方法上是相同的，区别在于 sessionStorage 在关闭页面后即被清空，而 localStorage 则会一直保存。我们这里以 localStorage 为例，简要介绍下 ...
HTML5的本地存储功能是现代Web开发中的一个重要特性，它允许网页在用户的浏览器上存储数据，无需服务器交互。这在创建离线应用、提高页面加载速度、存储用户偏好设置等方面非常有用。本篇文章将深入探讨HTML5本地...