HTML5之本地存储localstorage
Web Storage是HTML5引入的一个非常重要的功能,可以在客户端本地存储数据,类似HTML4的cookie,但可实现功能要比cookie强大的多,cookie大小被限制在4KB,Web Storage官方建议为每个网站5MB。
Web Storage又分为两种:
- sessionStorage
- localStorage
从字面意思就可以很清楚的看出来,sessionStorage将数据保存在session中,浏览器关闭也就没了;而localStorage则一直将数据保存在客户端本地;
不管是sessionStorage,还是localStorage,可使用的API都相同,常用的有如下几个(以localStorage为例):
- 保存数据:localStorage.setItem(key,value);
- 读取数据:localStorage.getItem(key);
- 删除单个数据:localStorage.removeItem(key);
- 删除所有数据:localStorage.clear();
- 得到某个索引的key:localStorage.key(index);
如上,key和value都必须为字符串,换言之,web Storage的API只能操作字符串。
接下来,我们通过Web Storage开发一个简单的通讯录小程序,以演示相关API的使用方法;我们要实现如下功能:
- 录入联系人,联系人有姓名、手机号码2个字段,以手机号作为key存入localStorage;
- 根据手机号码,查找机主;
- 列出当前已保存的所有联系人信息;
首先,准备一个简单的HTML页面,如下:
- <!DOCTYPE HTML>
- <html>
- <head>
- <meta charset="utf-8"/>
- <title>HTML5本地存储之Web Storage篇</title>
- </head>
- <body>
- <div style="border: 2px dashed #ccc;width:320px;text-align:center;">
- <label for="user_name">姓名:</label>
- <input type="text" id="user_name" name="user_name" class="text"/>
- <br/>
- <label for="mobilephone">手机:</label>
- <input type="text" id="mobilephone" name="mobilephone"/>
- <br/>
- <input type="button" οnclick="save()" value="新增记录"/>
- <hr/>
- <label for="search_phone">输入手机号:</label>
- <input type="text" id="search_phone" name="search_phone"/>
- <input type="button" οnclick="find()" value="查找机主"/>
- <p id="find_result"><br/></p>
- </div>
- <br/>
- <div id="list">
- </div>
- </body>
- </html>
界面展现如下:
要实现联系人的保存,只需要简单实现如下JS方法即可:
- //保存数据
- function save(){
- var mobilephone = document.getElementById("mobilephone").value;
- var user_name = document.getElementById("user_name").value;
- localStorage.setItem(mobilephone,user_name);
- }
要实现查找机主,则实现如下JS方法:
- //查找数据
- function find(){
- var search_phone = document.getElementById("search_phone").value;
- var name = localStorage.getItem(search_phone);
- var find_result = document.getElementById("find_result");
- find_result.innerHTML = search_phone + "的机主是:" + name;
- }
要展现所有已保存的联系人信息,则需要使用localStorage.key(index)方法,如下:
- //将所有存储在localStorage中的对象提取出来,并展现到界面上
- function loadAll(){
- var list = document.getElementById("list");
- if(localStorage.length>0){
- var result = "<table border='1'>";
- result += "<tr><td>姓名</td><td>手机号码</td></tr>";
- for(var i=0;i<localStorage.length;i++){
- var mobilephone = localStorage.key(i);
- var name = localStorage.getItem(mobilephone);
- result += "<tr><td>"+name+"</td><td>"+mobilephone+"</td></tr>";
- }
- result += "</table>";
- list.innerHTML = result;
- }else{
- list.innerHTML = "目前数据为空,赶紧开始加入联系人吧";
- }
- }
效果如下:
问题:如上的演示,都只有2个字段,姓名和手机号码,如果要存入更为丰富的联系人信息,比如公司名称、家庭地址等,如何实现呢?Web Storage不是只能处理字符串吗?此时,可以利用JSON的stringify()方法,将复杂对象转变成字符串,存入Web Storage中;当从Web Storage中读取时,可以通过JSON的parse()方法再转换成JSON对象;
如下简单演示增加了公司属性的联系人保存JS代码:
- //保存数据
- function save(){
- var contact = new Object;
- contact.user_name = document.getElementById("user_name").value;
- contact.mobilephone = document.getElementById("mobilephone").value;
- contact.company = document.getElementById("company").value;
- var str = JSON.stringify(contact);
- localStorage.setItem(contact.mobilephone,str);
- loadAll();
- }
- //将所有存储在localStorage中的对象提取出来,并展现到界面上
- function loadAll(){
- var list = document.getElementById("list");
- if(localStorage.length>0){
- var result = "<table border='1'>";
- result += "<tr><td>姓名</td><td>手机</td><td>公司</td></tr>";
- for(var i=0;i<localStorage.length;i++){
- var mobilephone = localStorage.key(i);
- var str = localStorage.getItem(mobilephone);
- var contact = JSON.parse(str);
- result += "<tr><td>"+contact.user_name+"</td><td>"+contact.mobilephone+"</td><td>"+contact.company+"</td></tr>";
- }
- result += "</table>";
- list.innerHTML = result;
- }else{
- list.innerHTML = "目前数据为空,赶紧开始加入联系人吧";
- }
- }
效果如下:
转载于:https://www.cnblogs.com/jinhengyu/p/8051376.html
HTML5之本地存储localstorage相关推荐
- HTML5本地存储 localStorage
HTML5的本地存储是大势所趋,如果仅存储在内存中,则是sessionStorage,他们的语法都是一样,仅仅是一个存储在本地文件系统中,另一个存储在内存中(随着浏览器的关闭而消失),其语句如下: l ...
- HTML5 本地存储 localstorage 安全分析
在HTML5本地存储出现以前,WEB数据存储的方法已经有很多,比如HTTP Cookie,IE userData,Flash Cookie,Google Gears.其实再说细点,浏览WEB的历史记录 ...
- Cocos本地存储LocalStorage
HTML5 LocalStorage 本地存储 //存档var stopResumeMenu4 = cc.MenuItemFont.create("存档", this.onSave ...
- html5有本地存储吗,HTML5的本地存储
HTML5的存储方式 HTML5给我们提供了新的存取本地数据的方法. 在HTML5之前,存储主要是放在cookie文件中.但是cookie文件有其自身的局限性. cookie文件每次请求的时候都会发送 ...
- Vuex是什么?以及 和本地存储localstorage的区别
先来说一下Vuex是什么? 官方给出的解释: Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式.它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化 ...
- HTML5本地存储localStorage,sessionStorage
HTML5新特性,用于本地存储, localStorage:不删除会一直存在斯基 sessionStorage:浏览器关掉,就跪了 /*** H5:数据存储方式,可以携带用户信息id* * 注意:* ...
- HTML5 学习笔记(三)——本地存储(LocalStorage、SessionStorage、Web SQL Database)
一.HTML4客户端存储 B/S架构的应用大量的信息存储在服务器端,客户端通过请求响应的方式从服务器获得数据,这样集中存储也会给服务器带来相应的压力,有些数据可以直接存储在客户端,传统的Web技术中会 ...
- HTML5本地存储localstorage
localStorage的用途 localStorage基本上就是三个特点: 数据永久被保存在本地,即使浏览器被关闭,数据也不会消失 存储空间大,一般为5~10M 存储的内容不会和服务器发生任何交互( ...
- HTML5的本地存储详解
为什么80%的码农都做不了架构师?>>> Html5 学习系列(六)Html5本地存储和本地数据库 一个网站如何能在客户的浏览器存储更多的数据呢? 在Html4的时代在浏览器端 ...
最新文章
- 重磅突发!全球首富40颗卫星遭摧毁
- Jmeter连接SqlServer数据库进行压力测试
- 在自定义HttpHandler中如何使用Session
- Opencv 深度学习识别性别和检测年龄
- Mysql的select in会自动过滤重复的数据
- 瞎学的几天 ----java多线程和线程池
- python按照区间长度给定不同数量的随机数
- 36岁程序员:领导平时称兄道弟,裁员时立刻变脸,看透人性
- 中介者模式php,PHP设计模式之中介者模式
- Syncfusion教程:在Xamarin.Forms中创建数据输入表单 (4)
- sql server 连接
- 微观数据库整理(公开渠道获得-持续更新)
- 将网页内容保存为PDF及为PDF创建多级书签
- 2020年中国研究生数学建模竞赛E题
- 《孤独的青春创造不孤独的人生》
- 最小生成树-普利姆和克鲁斯卡尔算法
- 这些样机模型,全部免费下载
- android设备绑定微软,Android 7.1.1 手机如何登录微软账号
- 【jQuery】兼容IE6的图表插件Highcharts
- object-orientedprocedure-oriented
热门文章
- 【linux笔记】secureCRT使用
- FFmpeg源代码简单分析:内存的分配和释放(av_malloc()、av_free()等)
- ITU-R BT.1788建议书 对多媒体应用中视频质量的主观评估方法
- java对象命名用变量_在Java语言中,所有的变量、常量、对象和类都是用【 】来命名的。...
- vue中的$event
- 动态调试 ida linux,IDA动态调试-ELF
- oracle里面的degree,收集统计信息degree不生效的问题
- hdu 6351 Beautiful Now
- [leetcode] 839. 相似字符串组并查集
- 2016蓝桥杯C++A:网友年龄