这次做项目有一些简单设置,说不用后台给接口,让做在本地,用本地存储,,所以现
学习了本地存储 了。。
其实还是蛮简单的。
讲解的目录:
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本地...