基本概念

1、传统方式我们以document.cookie来进行存储的，但是由于其存储大小只有4k左右，并且解析也相当的复杂，给开发带来诸多不便

2、h5存储设置、读取方便，而且容量较大，sessionStorage约5M、localStorage约20M

3、h5存储只能存储字符串，可以将对象JSON.stringify() 编码后存储

window.sessionStorage

1、在同一个窗口下数据可以共享

2、生命周期为关闭浏览器窗口（内存即毁灭）

window.sessionStorage.setItem("userName", "wq");//设置值

window.sessionStorage.setItem("userName", "qw");//更新值

window.sessionStorage.setItem("age", );//设置值

window.sessionStorage.getItem("userName");//获取值

window.sessionStorage.removeItem("userName");//移除值

window.sessionStorage.clear();//清空所有值

window.localStorage

1、可以多窗口共享

2、永久生效，除非手动删除（存储在硬盘上）

window.localStorage.setItem("userName", "kk");//设置值

window.localStorage.setItem("userName", "uu");//更新值

window.localStorage.getItem("userName");//获取值

window.localStorage.removeItem("userName");//移除值

window.localStorage.clear();//清空值

其他

WebSQL、IndexDB已经被w3c 放弃了..生命周期差异，存储空间差异

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title></title>

</head>

<body>

    <label for="">

        用户名： <input type="text" class="userName"/>

    </label>

    <br/><br/>

    <label for="">

        密　码： <input type="password" class="pwd"/>

    </label>

    <br/><br/>

    <label for="">

        <input type="checkbox" class="ckb"/>

        记住密码

    </label>

    <br/><br/>

    <button>登录</button>

<script>

    var userName=document.querySelector('.userName');

    var pwd=document.querySelector('.pwd');

    var sub=document.querySelector('button');

    var ckb=document.querySelector('.ckb');

    sub.onclick=function(){

   //如果记住密码 被选中存储，用户信息

        if(ckb.checked){

            window.localStorage.setItem('userName',userName.value);

            window.localStorage.setItem('pwd',pwd.value);

        }else{

            window.localStorage.removeItem('userName');

            window.localStorage.removeItem('pwd');

        }

   //否则清除用户信息

    }

    window.onload=function(){

    //当页面加载完成后，获取用户名，密码，填充表单

        userName.value=window.localStorage.getItem('userName');

        pwd.value=window.localStorage.getItem('pwd');

    }

</script>

</body>

</html>

html5——web存储的更多相关文章

  1. HTML5 Web存储(Web Storage)技术及用法

    在如今的Web开发中,HTML5是大家讨论的最大一个话题.HTML5提供的新功能特征使得Web程序员如虎添翼,并免去了以往钻研各种方法来让网站更好.更快.更灵活的气力.这些新功能中有一个非常让我感兴趣 ...

  2. HTML5 web 存储

    简介: HTML5 web 存储,一个比cookie更好的本地存储方式. 首先我们先了解一下: 什么是 HTML5 Web 存储? 使用html5可以在本地存储用户的浏览数据. 早些时候,本地存储使用 ...

  3. HTML5 Web存储 页面间进行传值

    在实际使用过程中,经常会遇到需要在页面间进行传值的情况,最初设想一定需要后端才能进行数据的存储和读取,或者在本地使用一个cookie进行保存,直到了解到HTML5 Web存储 使用HTML5的新特性可 ...

  4. 面试之HTML5 Web存储

    前几天面试遇到了一个题是问localStorage和sessionStorage的区别,当时的回答不是很全面,今天就针对这个问题做一下整理(概念,用法,区别) HTML5 Web存储,一个比 cook ...

  5. HTML5: HTML5 Web 存储

    ylbtech-HTML5: HTML5 Web 存储 1.返回顶部 1. HTML5 Web 存储 HTML5 web 存储,一个比cookie更好的本地存储方式. 什么是 HTML5 Web 存储 ...

  6. 有趣的HTML5 Web 存储

    HTML5 web 存储,一个比cookie更好的本地存储方式. 什么是 HTML5 Web 存储? 使用HTML5可以在本地存储用户的浏览数据. 早些时候,本地存储使用的是 cookie.但是Web ...

  7. 【读书笔记】HTML5 Web存储

    PS:这里讲web存储,主要是在客户端存储的一些技术:cookie,localstorage,sessionstorage,WebSQL.     Cookie   Cookie是HTML4中在客户端 ...

  8. HTML5本地化应用开发-HTML5 Web存储详解

    文章不是简单的的Ctrl C与V,而是一个字一个标点符号慢慢写出来的.我认为这才是是对读者的负责,本教程由技术爱好者成笑笑(博客:http://www.chengxiaoxiao.com/)写作完成. ...

  9. HTML5 web存储

    既然涉及到HTML5知识,那么必定会存在一定的兼容性问题,这里就涉及到浏览器的支持情况了. 浏览器支持情况: Internet Explorer 8+, Firefox, Opera, Chrome, ...

  10. 使用HTML5 Web存储的localStorage和sessionStorage方式

    localStorage(本地存储),可以长期存储数据,没有时间限制,一天,一年,两年甚至更长,数据都可以使用.sessionStorage(会话存储),只有在浏览器被关闭之前使用,创建另一个页面时同 ...

随机推荐

  1. Mysql 练习题 及 答案

    --1.学生表 Student(S,Sname,Sage,Ssex) --S 学生编号,Sname 学生姓名,Sage 出生年月,Ssex 学生性别 --2.课程表  Course(C,Cname,T ...

  2. 将Jquery EasyUI中DataGird的数据导入Excel中

    1.第一步获取前台DataGrid中的数据 var rows = $('#tb).datagrid("getRows");            if (rows.length = ...

  3. codevs1001 舒适的线路

    题目描述 Description Z小镇是一个景色宜人的地方,吸引来自各地的观光客来此旅游观光.Z小镇附近共有N(1<N≤500)个景点(编号为1,2,3,…,N),这些景点被M(0<M≤ ...

  4. H3c 配置ssh acl

    http://www.h3c.com/cn/d_201108/723349_30005_0.htm

  5. Happy 2006 欧几里得定理

    Happy 2006 Time Limit: 3000MS   Memory Limit: 65536K Total Submissions: 11956   Accepted: 4224 Descr ...

  6. Diagnose High-Latency I/O Operations Using SystemTap

    Luca Canali on 28 Jul 2015 Topic: this post is about some simple tools and techniques that can be us ...

  7. JAVA 并发编程-线程池（七）

    线程池的作用: 线程池作用就是限制系统中运行线程的数量. 依据系统的环境情况.能够自己主动或手动设置线程数量,达到运行的最佳效果:少了浪费了系统资源,多了造成系统拥挤效率不高.用线程池控制线程数量,其 ...

  8. [Vue-rx] Handle Image Loading Errors in Vue.js with RxJS and domStreams

    When an image fails to load, it triggers an error event. You can capture the error event and merge i ...

  9. [转] CV Datasets on the web

    转自:CVPapers This material is presented to ensure timely dissemination of scholarly and technical wor ...

  10. linux下的epoll怎样高效处理百万连接

    开发高性能网络程序时.windows开发人员们言必称iocp,linux开发人员们则言必称epoll.大家都明确epoll是一种IO多路复用技术,能够很高效的处理数以百万计的socket句柄,比起曾经 ...