使用Web Storage模拟数据库

Body

JavaScript

在JavaScript脚本中放了两个函数,saveStorage()和findStorage()函数

saveStorage()函数流程

1、从各输入文本框中获取数据

2、创建对象,将获取的数据作为对象的属性进行保存。

3、将对象转换为JSON格式的文本数据

4、将文本数据保存在localStorage中

为了将数据保存在一个对象中使用new Object语句创建一个对象,将各个数据保存在该对象的各个属性中,然后为了将对象转换为JSON格式的文本数据,使用JSON对象的stringify方法,

var str = JSON.tringify(data);

该方法只接受一个参数data,它表示要转换成JSON格式文本数据的对象,这个方法的作用是将对象转换成JSON格式的文本数据,并将其返回。

findStorage()函数流程

1、在localStorage中将检索用的姓名作为键值,获取对应的数据

2、将获取的数据转换成JSON对象

3、取得JSON对象的各个属性值,创建要输出的内容

4、将要输出的内容在页面上输出

该函数的关键是使用JSON对象的parse方法,将从localStorage中获取的数据转换成JSON对象。该函数的使用方法如下所示

var data = JSON.parse(str);

该方法只接受一个参数str,它表示从localStorage中取得的数据,这个方法的作用是将传入的数据转换成JSON对象,并将其返回。

时间: 2024-11-05 21:41:54

使用Web Storage模拟数据库的相关文章

HTML5权威指南--Web Storage,本地数据库,本地缓存API,Web Sockets API,Geolocation API(简要学习笔记二)

1.Web Storage HTML5除了Canvas元素之外,还有一个非常重要的功能那就是客户端本地保存数据的Web Storage功能. 以前都是用cookies保存用户名等简单信息. 但是cookie有下面几个问题: a:大小:cookies的大小被限制在4KB b:带宽:cookies随HTTP事务一起被发送,因此会浪费一部分发送的cookies时使用的带宽. c:复杂性:要正确的操纵cookies是很困难的. Web Storage分为两种: <1>sessionStorage 将数

HTML5笔记3——Web Storage和本地数据库

上一篇:HTML5笔记2——HTML5音/视频标签详解 Web Storage概述 在HTML5中,除了Canvas元素之外,另一个新增的非常重要的功能是可以再客户端本地保存数据的Web Storage功能,之前可以使用Cookies在客户端 保存诸如用户名等简单用户信息,但通过长期使用,人们发现使用Cookies存储永久数据存在几个问题. 大小:Cookies的大小被限制在4KB 带宽:Cookies是随HTTP失误一起被发送的,因此会浪费一部分发送Cookies时使用的带宽 复杂性:要正确的

web storage 之留言板

浏览器支持 IE8+,Firefox 28.0+,chrome 33.0+,Safari 7.0+. 先来了解几个js的问题. JSON.parse() 和 JSON.stringify() parse用于从一个字符串中解析出json对象,如 var str = '{"name":"huangxiaojian","age":"23"}' 结果: JSON.parse(str) Object age: "23"

html5本地存储(一)------ web Storage

在html5中与本地存储相关的两个相关内容:Web Storage  与本地数据库 web Storage存储机制是对html4中的cookie存储机制的一个改善.web Storage就是在web上存储数据的功能(针对客户端本地),使用它可以再客户端本地建立一个数据库,这样可以存储页面内容在本地,还加快了访问数据的速度. web Storage分两种:sessionStorage   与  localStorage 一.sessionStorage sessionStorage为临时保存,将数

JavaEE学习之Spring Security3.x——模拟数据库实现用户,权限,资源的管理

一.引言 因项目需要最近研究了下Spring Security3.x,并模拟数据库实现用户,权限,资源的管理. 二.准备 1.了解一些Spring MVC相关知识: 2.了解一些AOP相关知识: 3.了解Spring: 4.了解Maven,并安装. 三.实现步骤 本示例中使用的版本是Spring Security3.2.2.通过数据库实现Spring Security认证授权大致需要以下几个步骤: 1.新建maven web project(因为本示例使用的是maven来构建的),项目结构如下,

HTML5 Web Storage

前言 本章主要内容是Web Storage与本地数据库,其中Web Storage 是对cookie的优化,本地数据库是HTML5新增的一个功能,使用它可以在客户端建立一个数据库 大大减轻服务器端的负担,加快访问数据速度. 学习本章需要掌握Web Storage基本概念,了解sessionStorage与localStorage的使用与差别 掌握本地数据库的使用 什么是WebStorage? 前面说过,webstorage是对cookie的优化而来,HTML4中使用cookie在客户端存储用户数

H5本地储存Web Storage

一.本地存储由来的背景 由于HTML4时代Cookie的大小.格式.存储数据格式等限制,网站应用如果想在浏览器端存储用户的部分信息,那么只能借助于Cookie.但是Cookie的这些限制,也就导致了Cookie只能存储一些ID之类的标识符等简单的数据. 下面是Cookie的限制: 大多数浏览器支持最大为 4096 字节的 Cookie.    浏览器还限制站点可以在用户计算机上存储的 Cookie 的数量.大多数浏览器只允许每个站点存储 20 个Cookie:如果试图存储更多 Cookie,则最

HTML5 本地存储Web Storage简单了解

?HTML5本地存储规范,定义了两个重要的API :Web Storage  和  本地数据库Web SQL Database. 本地存储Web Storage 实际上是HTML4的cookie存储机制的一个改进版本,然而两种机制的功能又不相同.web storage 的作用是在网站中把有用的信息存储到本地的计算机 或移动设备上,然后根据实际需要从本地读取信息. web storage 提供了两种存储类型API接口:sessionStorage 和 localStorage .sessionSt

html5本地存储web storage的简单使用

html5的一个非常cool的功能,就是web storage,类似于之前的cookie,不过与之不同的是,web storage 拥有本地5兆的容量可以存储,而cookie却只有4K,这是完全不能比的优势. webstrange又分为:localstorage,sessionstorage和本地数据库. 接下来我就来一一介绍: 1 localstorage  localstorage 的使用比较简单,方法有: localStorage.setItem(key,value);//保存数据 loc