WebStorage

2019-11-13  10:46:18  by冲冲

1. 概况

  • 早期浏览器的本地存储使用cookie，当前推荐使用Web Storage。
  • Web Storage的数据以"键/值对"存在，Web网页的数据只允许该网页访问使用。

2. 浏览器支持

  • Internet Explorer 7 及更早IE版本不支持Storage。
  • IE8+、FireFox、Opera、Chrome、Safari已经支持Storage。
  • 使用storage之前，应该检查浏览器是否支持Storage。
1 if(typeof(Storage)!=="undefined")

2 {

3     // 支持localStorage和sessionStorage对象

4     // 业务代码.....

5 } else {

6     // 不支持web存储

7 }

3. Storage分类

  • localStorage：用于长期保存该网站的数据，数据的存储时间没有限制，直到手动去除。
  • sessionStorage：用于临时保存该网站的数据，在关闭窗口或标签页之后将会删除这些数据。

4. Storage作用域

作用域：隔离开不同页面之间的localStorage（例如：百度页面不能读到腾讯页面的localStorage）。

  • localStorage作用域：相同的协议、相同的主机名、相同的端口。
  • sessionStorage作用域：相同的协议、相同的主机名、相同的端口、相同窗口/浏览器标签页。

5. API

localStorage和sessionStorage使用的API相同，常用的有（以localStorage为例）

① 保存数据：localStorage.setItem(key,value);

② 读取数据：localStorage.getItem(key);

③ 删除单个数据：localStorage.removeItem(key);

④ 删除所有数据：localStorage.clear();

⑤ 得到某个索引的key：localStorage.key(index);

1 // 存储

2 localStorage.sitename = "菜鸟教程";

3 // 查找

4 document.getElementById("result").innerHTML = localStorage.sitename;

5 // 移除

6 localStorage.removeItem("sitename");

6. 数据类型

键/值对通常以字符串存储，可以按需要转换数据类型。

 1 // 该实例展示用户点击按钮的次数，期望将代码中的字符串值转换为数字类型

 2 if (localStorage.clickcount)

 3 {

 4     localStorage.clickcount=Number(localStorage.clickcount)+1;

 5 }

 6 else

 7 {

 8     localStorage.clickcount=1;

 9 }

10 document.getElementById("result").innerHTML=" 你已经点击按钮 " + localStorage.clickcount + " 次 ";

7. sessionStorage

sessionStorage方法针对一个session进行数据存储。当用户关闭浏览器窗口后，数据会被删除。

1 if (sessionStorage.clickcount)

2 {

3     sessionStorage.clickcount=Number(sessionStorage.clickcount)+1;

4 }

5 else

6 {

7     sessionStorage.clickcount=1;

8 }

9 document.getElementById("result").innerHTML="在这个会话中你已经点击该按钮 " + sessionStorage.clickcount + " 次 ";

8. 应用实例

 1 <!DOCTYPE html>

 2 <html>

 3 <head>

 4     <meta charset="utf-8">

 5     <title>HTML5本地存储之WebStorage</title>

 6 </head>

 7 <body>

 8     <div style="border: 2px dashed #ccc;width:320px;text-align:left;">

 9         <label for="keyname">别名(key):</label>

10         <input type="text" id="keyname" name="keyname" class="text"/>

11         <br/>

12         <label for="sitename">网站名：</label>

13         <input type="text" id="sitename" name="sitename" class="text"/>

14         <br/>

15         <label for="siteurl">网 址：</label>

16         <input type="text" id="siteurl" name="siteurl"/>

17         <br/>

18         <input type="button" onclick="save()" value="新增记录"/>

19         <hr/>

20         <label for="search_phone">输入别名(key)：</label>

21         <input type="text" id="search_site" name="search_site"/>

22         <input type="button" onclick="find()" value="查找网站"/>

23         <p id="find_result"><br/></p>

24     </div>

25     <br/>

26     <div id="list">

27     </div>

28     <script>

29     //保存数据

30     function save(){

31         var site = new Object;

32         site.keyname = document.getElementById("keyname").value;

33         site.sitename = document.getElementById("sitename").value;

34         site.siteurl = document.getElementById("siteurl").value;

35         var str = JSON.stringify(site); // 将对象转换为字符串

36         localStorage.setItem(site.keyname,str);

37         alert("保存成功");

38     }

39     //查找数据

40     function find(){

41         var search_site = document.getElementById("search_site").value;

42         var str = localStorage.getItem(search_site);

43         var find_result = document.getElementById("find_result");

44         var site = JSON.parse(str);

45         find_result.innerHTML = search_site + "的网站名是：" + site.sitename + "，网址是：" + site.siteurl;

46     }

47

48     //将所有存储在localStorage中的对象提取出来，并展现到界面上

49     //确保存储的 keyname 对应的值为转换对象，否则JSON.parse会报错

50     function loadAll(){

51         var list = document.getElementById("list");

52         if(localStorage.length>0){

53             var result = "<table border='1'>";

54             result += "<tr><td>别名</td><td>网站名</td><td>网址</td></tr>";

55             for(var i=0;i<localStorage.length;i++){

56                 var keyname = localStorage.key(i);

57                 var str = localStorage.getItem(keyname);

58                 var site = JSON.parse(str);

59                 result += "<tr><td>"+site.keyname+"</td><td>"+site.sitename+"</td><td>"+site.siteurl+"</td></tr>";

60             }

61             result += "</table>";

62             list.innerHTML = result;

63         }else{

64             list.innerHTML = "数据为空...";

65         }

66     }

67     </script>

68 </body>

69 </html>

参考：https://www.runoob.com/html/html5-webstorage.html

【HTML】WebStorage的更多相关文章

  1. Python高手之路【六】python基础之字符串格式化

    Python的字符串格式化有两种方式: 百分号方式.format方式 百分号的方式相对来说比较老,而format方式则是比较先进的方式,企图替换古老的方式,目前两者并存.[PEP-3101] This ...

  2. 【原】谈谈对Objective-C中代理模式的误解

    [原]谈谈对Objective-C中代理模式的误解 本文转载请注明出处 —— polobymulberry-博客园 1. 前言 这篇文章主要是对代理模式和委托模式进行了对比,个人认为Objective ...

  3. 【原】FMDB源码阅读（三）

    [原]FMDB源码阅读(三) 本文转载请注明出处 —— polobymulberry-博客园 1. 前言 FMDB比较优秀的地方就在于对多线程的处理.所以这一篇主要是研究FMDB的多线程处理的实现.而 ...

  4. 【原】Android热更新开源项目Tinker源码解析系列之一：Dex热更新

    [原]Android热更新开源项目Tinker源码解析系列之一:Dex热更新 Tinker是微信的第一个开源项目,主要用于安卓应用bug的热修复和功能的迭代. Tinker github地址:http ...

  5. 【调侃】IOC前世今生

    前些天,参与了公司内部小组的一次技术交流,主要是针对<IOC与AOP>,本着学而时习之的态度及积极分享的精神,我就结合一个小故事来初浅地剖析一下我眼中的“IOC前世今生”,以方便初学者能更 ...

  6. Python高手之路【三】python基础之函数

    基本数据类型补充: set 是一个无序且不重复的元素集合 class set(object): """ set() -> new empty set object ...

  7. Python高手之路【一】初识python

    Python简介 1:Python的创始人 Python (英国发音:/ˈpaɪθən/ 美国发音:/ˈpaɪθɑːn/), 是一种解释型.面向对象.动态数据类型的高级程序设计语言,由荷兰人Guido ...

  8. 【开源】简单4步搞定QQ登录，无需什么代码功底【无语言界限】

    说17号发超简单的教程就17号,qq核审通过后就封装了这个,现在放出来~~ 这个是我封装的一个开源项目:https://github.com/dunitian/LoTQQLogin ————————— ...

  9. 【原】FMDB源码阅读（二）

    [原]FMDB源码阅读(二) 本文转载请注明出处 -- polobymulberry-博客园 1. 前言 上一篇只是简单地过了一下FMDB一个简单例子的基本流程,并没有涉及到FMDB的所有方方面面,比 ...

随机推荐

  1. (翻译)领域驱动设计实现-Implementing Domain Driven Design

    简介 Implementing Domain Driven Design 领域驱动设计实现 A practical guide for implementing the Domain Driven D ...

  2. django-admin和django-admin.py的区别

    问题 django初学者在使用django-admin创建项目时容易出现无法创建的错误,这是因为网上很多教程用的都是django-admin.py创建的项目,不出意外的话,你输入相同的命令会发现项目没 ...

  3. Spring Cloud Alibaba 使用Nacos作为服务注册中心

    为什么需要注册中心? 在分布式架构中,服务会注册到这里,当服务需要调用其它服务时,就到这里找到服务的地址,进行调用:服务管理,核心是有个服务注册表,心跳机制动态维护 : 服务注册 创建普通Spring ...

  4. STM32 禁用或开启总中断

    今天把之前自己的一些在中断方面所产生的疑惑把具体的解决办法给大家分享一下,希望能够帮到大家. STM32在使用时有时需要禁用全局中断,比如MCU在升级过程中需禁用外部中断,防止升级过程中外部中断触发导 ...

  5. stm32电机控制之控制两路直流电机！看完你会了吗

    手头上有一个差分驱动的小车,使用两个直流电机驱动,要实现小车的在给定速度下运动,完成直线行驶,转向,加速,刹车等复杂运动. 使用的电机是12v供电的直流电机,带编码器反馈,这样就可以采用闭环速度控制, ...

  6. ArrayList集合底层原理

    目录 ArrayList集合特点及源码分析 ArrayList源码分析 成员变量 构造函数 增加方法 add(E e)方法 add(int index, E element)方法 删除方法 remov ...

  7. hdu 5057 Argestes and Sequence (数状数组+离线处理)

    题意: 给N个数.a[1]....a[N]. M种操作: S X Y:令a[X]=Y Q L R D P:查询a[L]...a[R]中满足第D位上数字为P的数的个数 数据范围: 1<=T< ...

  8. hdu 5056 Boring count （类似单调队列的做法。。）

    给一个由小写字母构成的字符串S,问有多少个子串满足:在这个子串中每个字母的个数都不超过K. 数据范围: 1<=T<= 1001 <= the length of S <= 10 ...

  9. 什么是操作系统fork()进程

    1.fork()是创建进程函数. 2.c程序一开始,就会产生 一个进程,当这个进程执行到fork()的时候,会创建一个子进程. 3.此时父进程和子进程是共存的,它们俩会一起向下执行c程序的代码. 4. ...

  10. ffmpeg第7篇：数据流选择神器-map指令

    自动选择规则 ffmpeg在处理视频时,如果只提供了输入和输出参数,ffmpeg会自动地去选择相应的视频流和音频流来合成文件 自动选择的方式根据如下规则: 视频流:选分辨率最高的,比如有两个视频,一个 ...