Web Storage是HTML5新增的特性，能够在本地浏览器存储数据，对数据的操作很方便，最大能够存储5M。

　　Web Storage有两种类型: SessionStorage 和 LocalStorage。SessionStorage是在浏览器打开的时间内保存数据，当关闭网页的时候数据随之丢弃。LocalStorage保存的数据不会随着网页和浏览器的关闭而消失，它会保存在本地，当网页再次打开的时候，数据依然存在。

　　

　　Web Storage有四种常用的方法：

　　getItem("Key");　　　　　　//获得数据

　　setItem("Key",value);　　　　//存储数据

　　removeItem("Key");　　　　//删除数据

　　clear();　　　　　　　　　　//批量删除数据

　　应用例子：

 1 <!DOCTYPE html>

 2 <html>

 3 <head lang="en">

 4     <meta charset="UTF-8">

 5     <title></title>

 6 </head>

 7 <body>

 8     <input type="text" id="text1">

 9     <input type="button" value="session_set" onclick="save_session()">

10     <input type="button" value="session_get" onclick="load_session()">

11     <br>

12     <input type="text" id="text2">

13     <input type="button" value="local_set" onclick="save_local()">

14     <input type="button" value="local_get" onclick="load_local()">

15     <script>

16         function save_session(){

17             var target=document.getElementById("text1");

18             var str=target.value;

19             sessionStorage.setItem("text_message",str);

20         }

21         function load_session(){

22             var str=sessionStorage.getItem("text_message");

23             alert(str);

24         }

25         function save_local(){

26             var target=document.getElementById("text2");

27             var str=target.value;

28             localStorage.setItem("text_message",str);

29         }

30         function load_local(){

31             var str=localStorage.getItem("text_message");

32             alert(str);

33         }

34     </script>

35 </body>

36 </html>

　　链接地址：http://1.huizit1.applinzi.com/HTML5/web_storage/webstorage.html

　　

HTML5新特性之Web Storage的更多相关文章

  1. HTML5 十大新特性(九)——Web Storage

    H5的webStorage技术一共提供了两个对象:window.sessionStorage和window.localStorage. 一.window.sessionStorage--会话级存储 存 ...

  2. HTML5新特性之Web Worker

    1.概述 JavaScript语言采用的是单线程模型,也就是说,所有任务排成一个队列,一次只能做一件事.随着电脑计算能力的增强,这一点带来很大的不便,无法充分发挥JavaScript的潜能.龙其考虑到 ...

  3. web全栈架构师[笔记] — 03 html5新特性

    HTML5新特性 一.geolocation PC端 精度比较低 通过IP库定位 移动端 通过GPS window.navigator.geolocation 单次 getCurrentPositio ...

  4. html5新特性与用法大全了解一下

    有好多小伙伴私聊我问我html5新特性 和用法,下面我给大家具体介绍一下html5都新加了哪些新特性,下面我给大家总结一下. 1)新的语义标签 footer header 等等2)增强型表单 表单2. ...

  5. 前端进阶系列(三):HTML5新特性

    HTML5 是对 HTML 标准的第五次修订.其主要的目标是将互联网语义化,以便更好地被人类和机器阅读,并同时提供更好地支持各种媒体的嵌入.HTML5 的语法是向后兼容的.现在国内普遍说的 H5 是包 ...

  6. html5新特性

    这一篇博文不会告诉你怎么去使用html5的新特性,只会给你总结一下新特性------对于好学的人可以把这篇文章当做一个目录 对于初接触的人来说是一个导向 对于已经接触过的人来说是一个检测你掌握程度的检 ...

  7. HTML5新特性之CSS+HTML5实例

    1.新的DOCTYPE和字符集 HTML5的一项准则就是化繁为简,Web页面的DOCTYPE被极大的简化. <!DOCTYPE html> 同时字符集声明也被简化了: <meta c ...

  8. HTML5新特性：范围样式

    原文出处:http://blog.csdn.net/hfahe/article/details/7381141        Chromium 最近实现了一个HTML5的新特性:范围样式,又叫做< ...

  9. HTML5新特性 websocket(重点)--多对多聊天室

    一.html5新特性  websocket(重点)--多对多聊天室 HTTP:超文本传输协议 HTTP作用:传输网页中资源(html;css;js;image;video;..) HTTP是浏览器搬运 ...

  10. HTML5新特性--svg-echarts(重点)-拖动API-WebWorker

    一.html5新特性--svg--(折线/渐变特效对象/滤镜) #折线:多个坐标点组件一条折线 <polyline points="50,50 70,55 60,66 " s ...

随机推荐

  1. 随机森林n_estimators 学习曲线

    随机森林 单颗树与随机森林的的分对比 # 导入包 from sklearn.datasets import load_wine from sklearn.model_selection import ...

  2. [网络]HTTPS下服务器与浏览器的通信：HTTPS背后的加密算法 | TLS := SSL [转载]

    全文转载自: HTTPS背后的加密算法 - 博客园 1 概述: 基本原理/过程 当你在浏览器的地址栏上输入https开头的网址后,浏览器和服务器之间会在接下来的几百毫秒内进行大量的通信.InfoQ的这 ...

  3. list列表和tuple、条件判断、循环、dict和set、调用函数、定义函数

    1.list列表是有序的可变的列表,可以进通过append()方法末尾添加,通过pop删除末尾以及根据索引pop(i)来删除指定索引对应的元素 通过给指定的列表元素赋值更改元素值,通过列表的索引查看元 ...

  4. 五月十六号java基础知识点

    1.方法引用就是用双冒号"::"来简化Lambda表达式2.方法引用四种引用方式:1)对象名::实例方法名 //用对象名调用实例方法2)类名::静态方法名 //用类名引用静态方法 ...

  5. Semantic Kernel 入门系列：🥑突破提示词的限制

    无尽的上下文 LLM的语言理解和掌握能力在知识内容的解读和总结方面提供了强大的能力. 但是由于训练数据本身来自于公共领域,也就注定了无法在一些小众或者私有的领域能够足够的好的应答. 因此如何给LLM ...

  6. 介绍ServiceSelf项目

    ServiceSelf 做过服务进程功能的同学应该接触过Topshelf这个项目,它在.netframework年代神一搬的存在,我也特别喜欢它.遗憾的是在.netcore时代,这个项目对.netco ...

  7. Linux/UNIX Shell $PATH变量

    Linux/UNIX的shell在执行命令时,会查找路径$PATH来录找命令. 1:$PATH是一个以冒号分隔的目录列表,执行命令时,会在列表中查找. 2:命令可以是SHELL脚本也可以是可执行文件, ...

  8. lombok版本报错问题java.lang.IllegalAccessError: class lombok.javac.apt.LombokProcessor (in unnamed module

    lombok版本报错问题 记录一个项目部署时遇到的问题,我本地采用的JDK8的版本,然后我的服务器采用的是JDK17,然后在用maven进行打包的时候,发现package失败. 复现 我在本地采用的l ...

  9. BS系统自动更新的实现

    背景: 我公司做的考试系统(基于java开发的BS系统)是卖给学校的,随着客户数量增多,日常版本升级.远程维护工作占了程序员很多时间,遂考虑实现系统自动化更新. 要解决的问题及解决方案: 1.什么时候 ...

  10. #Python merge函数，pandas库数据查询功能，对标V-LOOKUP

    日常办公中,我们经常会遇到需要匹配表,匹配对应数据的场景,在EXCEL中,我们习惯使用VLOOKUP函数或者是X-LOOKUP函数,今天学习的是Python,pandas库中的匹配功能. 首先导入所需 ...