​HTML5本地存储规范,定义了两个重要的API :Web Storage  和  本地数据库Web SQL Database。

本地存储Web Storage 实际上是HTML4的cookie存储机制的一个改进版本,然而两种机制的功能又不相同。web storage 的作用是在网站中把有用的信息存储到本地的计算机

或移动设备上,然后根据实际需要从本地读取信息。

web storage 提供了两种存储类型API接口:sessionStorage 和 localStorage 。
sessionStorage:会话期间内有效;
localStorage  :永久的,除非用户或程序对其执行删除操作;

如何检测浏览器是否支持web storage 代码如下:

if(window.localStorage){
//浏览器支持localStorage
}
if(window.sessionStorage){
//浏览器支持sessionStorage
}

我们来看看HTML5规范中定义的Storage的如下API:

interface Storage{
readonly attribute unsigned long length;
DOMString? key(in unsigned long index);
getter DOMString getItem(in DOMString key);
setter creator void setItem(in DOMString key,in DOMString value);
deleter void removeItem(in DOMString key);
void clear();
}

​从规范定义的接口来看,接口数量并不多,只有length是属性,其余都是方法。
其中getItem 和 setItem 互为一对setter 和 getter方法,如果有面向对象知识,看到这种方法名的定义,必定不会感到陌生。
removeItem方法的主要作用是删除一个key/value(键/值)对。
clear方法的作用则是删除所有的键值对。

探讨如何使用storage的各个API,代码如下:

localStorage.setItem("name","存储的内容!!!");//存储内容
localStorage.getItem("name"); //读取内容
localStorage.key(1); //取出键值
localStorage.removeItem("name"); //删除指定key为“name”的item
localStorage.clear();// 删除localStorage所有数据

练习1代码如下

<!-- 提示浏览器是否支持localStorage -->
<div id="msg" style="color: #f00;"></div>
<h4>通过localStorage的一些方法来添加 修改 删除数据 <span style="color: #0f0">修改后需要刷新页面</span></h4>
<ul>
<li>姓名:<input type="text" id="name"><input type="button" value="提交" id="subName"><input type="button" value="删除" id="clearName"></li>
<li>年龄:<input type="text" id="age"><input type="button" value="提交" id="subAge"><input type="button" value="删除" id="clearAge"></li>
<li>出生日期:<input type="text" id="date"><input type="button" value="提交" id="subDate"><input type="button" value="删除" id="clearDate"></li>
</ul>
<input type="button" id="clearAll" value="清除所有数据">
<script type="text/javascript">
function _(id){
return document.getElementById(id);
} if(window.localStorage){
//浏览器支持localStorage
//console.log("浏览器支持localStorage");
_("msg").innerHTML = "浏览器支持localStorage";
// 初始是本地数据
_("name").value = localStorage.getItem("name");
_("age").value = localStorage.getItem("age");
_("date").value = localStorage.getItem("date"); //存储数据或修改数据
_("subName").onclick = function(){
var str = _("name").value;
localStorage.setItem("name",str);//存储姓名
};
_("subAge").onclick = function(){
var str = _("age").value;
localStorage.setItem("age",str);//存储年龄
};
_("subDate").onclick = function(){
var str = _("date").value;
localStorage.setItem("date",str);//存储出生日期
};
// 通过key的值来删除item
_("clearName").onclick = function(){
localStorage.removeItem("name");
};
_("clearAge").onclick = function(){
localStorage.removeItem("age");
};
_("clearDate").onclick = function(){
localStorage.removeItem("date");
};
// 删除localStorage所有数据
_("clearAll").onclick = function(){
localStorage.clear();
};
}else{
_("msg").innerHTML = "浏览器不支持localStorage";
}
</script>

HTML5 本地存储Web Storage简单了解的更多相关文章

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

    html5的一个非常cool的功能,就是web storage,类似于之前的cookie,不过与之不同的是,web storage 拥有本地5兆的容量可以存储,而cookie却只有4K,这是完全不能比 ...

  2. HTML5本地存储 Web Storage

    Web Storage基本介绍 HTML5 定义了本地存储规范 Web Storage , 提供了两种存储类型 API  sessionStorage 和 localStorage,二者的差异主要是数 ...

  3. HTML5本地存储——Web SQL Database

    在HTML5 WebStorage介绍了html5本地存储的Local Storage和Session Storage,这两个是以键值对存储的解决方案,存储少量数据结构很有用,但是对于大量结构化数据就 ...

  4. [转]HTML5本地存储——Web SQL Database

    在HTML5 WebStorage介绍了html5本地存储的Local Storage和Session Storage,这两个是以键值对存储的解决方案,存储少量数据结构很有用,但是对于大量结构化数据就 ...

  5. HTML5本地存储(Local Storage) 的前世今生

    长久以来本地存储能力一直是桌面应用区别于Web应用的一个主要优势.对于桌面应用(或者原生应用),操作系统一般都提供了一个抽象层用来帮助应用程序保存其本地数据 例如(用户配置信息或者运行时状态等). 常 ...

  6. HTML5本地存储——Web SQL Database与indexedDB

    虽然在HTML5 WebStorage介绍了html5本地存储的Local Storage和Session Storage,这两个是以键值对存储的解决方案,存储少量数据结构很有用,但是对于大量结构化数 ...

  7. 本地存储 web storage

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  8. html5本地存储 local storage

    HTML5 web storage, a better local storage than cookies. With HTML5, web pages can store data locally ...

  9. HTML5本地存储——IndexedDB(一:基本使用)

    在HTML5本地存储——Web SQL Database提到过Web SQL Database实际上已经被废弃,而HTML5的支持的本地存储实际上变成了 Web Storage(Local Stora ...

随机推荐

  1. Node.js 笔记03

    一.buffer(缓存区) Node里面的buffer,是一个二进制数据容器,数据结构类似与数组,专门用于Node中数据的存放 ​ 1. buffer的基本使用 历史上的使用方式:const buf1 ...

  2. Git错误

    $ rm -rf .git $ git config --global core.autocrlf  false $git init $git add . ---------------------- ...

  3. data-ng-click 指令

    <!DOCTYPE html><html><head><meta http-equiv="Content-Type" content=&q ...

  4. 简述 private、 protected、 public、 internal 修饰符的访问权限

    简述 private. protected. public. internal 修饰符的访问权限. private : 私有成员, 在该类的内部才可以访问. protected : 保护成员,该类内部 ...

  5. 全局变量&局部变量&Static存储&Register变量

    1.局部变量 局部变量也称为内部变量.局部变量是在函数内作定义说明的.其作用域仅限于函数内:函数的形参就是局部变量: 2.全局变量 全局变量也称为外部变量,它是在函数外部定义的变量.全局变量的说明符为 ...

  6. ccenteros 部署 redis

    step one :  yum install redis    -- 安装redis数据库 step two:安装完成之后开启redis 服务 service redis start   syste ...

  7. iOS 崩溃日志分析(个人总结,最实用)

    iOS 崩溃日志分析(个人总结,最实用) 要分析奔溃日志需要三个文件:crash日志,symbolicatecrash分析工具,.dSYM符号集 0. 在桌面创建一个crash文件夹 1. 需要Xco ...

  8. iOS之报错“Cannot create __weak reference in file using manual reference counting”解决办法

    解决的办法:在Build Settings--------->Aplle LLVM8.0 - Language - Objectibe-C------------->Weak Refere ...

  9. 【转载】Git忽略规则和.gitignore规则不生效的解决办法

    原文:https://www.cnblogs.com/zhangxiaoliu/p/6008038.html Git忽略规则: 在git中如果想忽略掉某个文件,不让这个文件提交到版本库中,可以使用修改 ...

  10. jquery点击按钮复制内容

    做移动端的项目遇到一个需求要点击按钮复制dom里的内容,看了很多资料显示必须textarea或者input里的内容才能简单复制,还有就是用插件的了,最终都因为遇到各种问题放弃,最终选择了最简单的点击复 ...