html5本地存储论坛,Web Storage--HTML5本地存储
什么是Web Storage
Web Storage是HTML5里面引入的一个类似于cookie的本地存储功能,可以用于客户端的本地存储,其相对于cookie来说有以下几点优势:
存储空间大:cookie只有4KB的存储空间,而Web Storage在官方建议中为每个网站5M。
可选择性强:Web Storage分为两种:sessionStorage和localStorage
Web Storage的使用方法
在使用上,session Storage和local Storage大同小异,只是session Storage是将数据临时存储在session中,浏览器关闭,数据随之消失。而local Storage则是将数据存储在本地,理论上来说数据永远不会消失,除非人为删除。
API:
保存数据 localStorage.setItem( key, value ); sessionStorage.setItem( key, value );
读取数据 localStorage.getItem( key ); sessionStorage.getItem( key );
删除单个数据localStorage.removeItem( key ); sessionStorage.removeItem( key );
删除全部数据localStorage.clear( ); sessionStorage.clear( );
获取索引的keylocalStorage.key( index ); sessionStorage.key( index );
注意:Web Storage的API只能操作字符串
在使用Web Storage之前,我们需要注意以下几点:
仅支持支持IE8及以上版本
由于只能对字符串类型数据进行操作,所以对一些JSON对象需要进行转换
因为是明文存储,所以毫无隐私性可言,绝对不能用于存储重要信息
会是浏览器加载速度在一定程度上变慢
无法被爬虫程序爬取
使用Web Storage之前,请加上以下代码,对浏览器对Web Storage的支持性进行判断
if(window.localStorage){//或者window.sessionStorage
alert("浏览器支持localStorage")
//主逻辑业务
}else{
alert("浏览不支持localStorage")
//替代方法
}
我们来写一个学生管理小程序用于演示Web Storage的基本用法
简单的html页面先准备好
学生姓名:
性别:
学号:
家庭住址:
电话号码:
输入姓名:
输入姓名:
在这个程序里面我们将实现增删查的基本功能,修改数据的功能相信大家看完后自己就能写出来。
接下来开始写方法:
存储
//利用localStorage存储数据
function save() {
var contact = new Object();
var Name = document.getElementById("name").value;
var Sex = document.getElementById("sex").value;
var Num = document.getElementById("num").value;
var Add = document.getElementById("add").value;
var Tel = document.getElementById("tel").value;
if(JTrim(Name) != "" && JTrim(Sex) != "" && JTrim(Num) != "" && JTrim(Add) != "" && JTrim(Tel) != "") {
contact.name = Name;
contact.sex = Sex;
contact.num = Num;
contact.add = Add;
contact.tel = Tel;
var str = JSON.stringify(contact);//对JSON对象进行处理,用于从一个对象解析出字符串
if(window.localStorage) {
localStorage.setItem(contact.name,str);
} else {
alert("您暂时还无法使用本功能");
return;
}
} else {
alert("请输入内容");
}
}
其中用到了Trim()这个方法,用于判断输入是否为空
function JTrim(s) {
return s.replace(/(^\s*)|(\s*$)/g, "");
}
展示所有信息
function loadAll() {
var resource = document.getElementById("list");
if(window.localStorage) {
var result = "
result += "
姓名性别学号家庭住址电话号码";
for(var i = 0;i < localStorage.length; i++) {
var Name = localStorage.key(i);//用于得到索引的key,在这个程序里,key为name
var str = localStorage.getItem(Name);
var contact = JSON.parse(str);//对JSON对象进行处理,用于从一个字符串中解析出JSON对象
result += "
"+contact.name+""+contact.sex+""+contact.num+""+contact.add+""+contact.tel+"";
}
result += "
";
resource.innerHTML = result;
} else {
alert("您暂时还无法使用本功能");
return;
}
}
查询
function search() {
var resource = document.getElementById("tato");
var search_name = document.getElementById("search_name").value;
if(window.localStorage) {
var str = localStorage.getItem(search_name);
if(str != null) {
var result = "
result += "
姓名性别学号家庭住址电话号码";
var contact = JSON.parse(str);
result += "
"+contact.name+""+contact.sex+""+contact.num+""+contact.add+""+contact.tel+"";
result += "
";
resource.innerHTML = result;
} else {
alert("系统无此人");
return;
}
} else {
alert("您暂时还无法使用本功能");
return;
}
}
删除
function del() {
var del_name = document.getElementById("del_name").value;
if(window.localStorage) {
var result = localStorage.getItem(del_name);
localStorage.removeItem(del_name);
if(result != null) {
alert("删除成功");
} else {
alert("系统无此人");
return;
}
} else {
alert("您暂时还无法使用本功能");
return;
}
}
在这里如果想对所有数据做删除处理则只需将localStorage.removeItem();换成localStorage.clear();即可
现在让我们在浏览器的开发者工具里面看一看Web Storage到底是怎么存储的
我们可以在chrome开发者工具里面找到Application这个选项,其中就有今天的主角:Local Storage和Session Storage
现在输入一些数据
点击提交之后我们立刻就能在Local Storage里面看到明文存储的数据(后面的value是以JSON对象来存储的,所以在对其进行操作的时候需要转换格式)
总结
Web Storage固然简单实用,但是数据的明文存储实在是硬伤,所以各位使用之前请三思
html5本地存储论坛,Web Storage--HTML5本地存储相关推荐
- HTML5 高级系列:web Storage
HTML5 高级系列:web Storage html5 浏览数:172 2017-10-23 前言 HTML5 的 web Storage 存储方式有两种:localStorage 和 sessio ...
- HTML5本地存储之Web Storage篇
2019独角兽企业重金招聘Python工程师标准>>> Web Storage是HTML5引入的一个非常重要的功能,在前端开发中经常用到,可以在客户端本地存储数据,类似HTML4的c ...
- HTML5 高级系列:web Storage 学前端开发要先看这个
HTML5 高级系列:web Storage 学前端开发要先看这个 前言 HTML5 的 web Storage 存储方式有两种:localStorage 和 sessionStorage. 这两种方 ...
- HTML5 本地存储(Web Storage)
HTML5 提供了两种在客户端存储数据的新方法: localStorage - 本地永久存储,下次打开浏览器数据依然存在 sessionStorage - 只存在于一个会话的数据存储,关闭浏览器数据会 ...
- HTML5客户端数据存储机制Web Storage和Web SQL Database
引言 html5本地存储可以选择两种方式,一种是本地存储,一种是sqlite. 比如开发html5的购物车功能,就可以考虑选择其中之一,进行本地存储与操作. 又或者保存用户登录信息,可以使用local ...
- HTML5 Web存储(Web Storage)技术以及用法
使用HTML5可以在本地存储用户的浏览数据.早些时候,本地存储使用的是 cookie.但是Web 存储需要更加的安全与快速,这些数据不会被保存在服务器上,但是这些数据只用于用户请求网站数据上.它也可以 ...
- html5 底部导航栏,web前端html5手机端底部导航多种方法推荐
DEMO * { padding:0px; margin:0px; font-family:微软雅黑; } ul li { list-style:none; } .container { width: ...
- (五)HTML5本地存储——Web Storage
Web应用的发展,使得客户端存储使用得也越来越多,而实现客户端存储的方式则是多种多样.最简单而且兼容性最佳的方案是Cookie,但是作为真正的客户端存储,Cookie则存在很多致命伤.此外,在IE6及 ...
- HTML5 本地存储 Web Storage
Web Storage Web Storage 是一项非常重要,并且很实用的技术,已经被大多数浏览器(包括IE8)所支持, 在HTML4时代, 虽然cookie无处不在,但cookie仍然有自己的硬伤 ...
最新文章
- 《数据科学家养成手册》第十章--混沌论
- JSTL(JSP 标准标签库)和EL表达式联合使用时,进行字符的比较
- Elasticsearch和Hive整合,将hive数据同步到ES中
- 百度SEO网页背景渐变色代码
- gnss单频软件接收机应用与编程_多星座是当今接收机的标准,而多频多用于高精度领域...
- UnicodeDecodeError: 'utf8' codec can't decode byte 0xd1 in position 0: invalid continuation byte问题
- nginx,作为前端的你会多少?
- 【今日所得】1.29。。。
- c# 类似Excel的趋势线拟合
- 瑞利衰落的概念及应对技术——信道编码、交织、跳频
- matlab 正交park变换 功率守恒,第二章功率变换.ppt
- Ubuntu20.04安装有道词典 + 卸载
- 查询域名对应的IP以及查询该IP是否已经备案开放80端口
- 市政基础设施工程与建筑工地施工人员安全管理实名制通道系统的应用与解决方案
- android动态指示箭头,android – 自定义选项卡指示器(箭头像指示器)
- 识别合格ToB产品经理
- h5大前端常用网站以及npm模块整理
- usb4java android,桌面java应用程序通过USB复制和传输android数据
- CSS3 仿古墓丽影9菜单界面
- 微信小程序(三)常见组件
热门文章
- 转使用jQuery Ajax的内存回收
- 同事更新几个表_最近计划学习的几个网站资源
- HashMap jdk1.7和1.8概述
- Easyui笔记:jquery执行append后input的验证失效解决方案
- centos6 postgresql安装
- android密码可见不可见的光标控制,Android EditText 在设置为输入密码的时候 密码是否可见 光标在最后显示...
- MySQL表结构设计之范式化和反范式化对比
- 1007 素数对猜想 (20分)
- 1003 我要通过! (20分)
- 昆山立讯电子工程师_教会徒弟饿死师傅?立讯精密会不会成为第二个富士康