基本概念

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. NYOJ5 Binary String Matching

    Binary String Matching 时间限制:3000 ms  |  内存限制:65535 KB 难度:3   描述 Given two strings A and B, whose alp ...

  2. NOIP2011 提高组合集

    NOIP 2011 提高组合集 D1 T1 铺地毯 模拟,题目让你干啥你就干啥 #include <iostream> #include <cstdio> using name ...

  3. java 中public 类

    java 中的文件名是以这个文件里面的public 的那个类命名的(也就是说文件名和这个文件里面的那个public 属性的class 名称一样), 同一个文件中不能放多个(超过2个)的pulic 类. ...

  4. D3js-API介绍【中】

    JavaScript可视化图表库D3.js API中文參考,d3.jsapi D3 库所提供的全部 API 都在 d3 命名空间下.d3 库使用语义版本号命名法(semantic versioning ...

  5. HLJU 1188 Matrix （二维树状数组）

    Matrix Time Limit: 4 Sec  Memory Limit: 128 MB Description 给定一个1000*1000的二维矩阵,初始矩阵中每一个数都为1,然后为矩阵有4种操 ...

  6. COCOS学习笔记--变速动作Speed和ActionEase

    变速动作和复合动作类似.也是一种特殊的动作,它能够把不论什么动作依照改变后的速度运行.变速动作与复合动作最大的差别就是复合动作仅仅是单纯的组合一系列动作,而变速的做在组合一系列动作后还要去改变动作的运 ...

  7. iOS 打开扬声器以及插入耳机的操作

    废话不多说说一下现状 网上好多关于扬声器的操作,可是问题多多.SDK7.X 和SDK7.X以上版本号有点诧异 #import <Foundation/Foundation.h> #impo ...

  8. 关于Android中的四大组件(Service的开启与关闭)

    前言 服务(Service)是Android系统中的四大组件之中的一个.服务主要用于两个目的:后台执行和跨进程訪问. 通过启动 一个服务.能够在不显示界面的前提下在后台执行指定的任务,这样能够不影响用 ...

  9. Centos 7 Apache编译安装

    1.安装apache ./configure --prefix=/usr/local/apache2 --enable-rewrite --enable-so --enable-headers --e ...

  10. MySQL5.6 GTID方式，配置主从

    迁移数据到从库 数据导出: mysqldump -uroot -p111111 -h127. -P3306 -q --single-transaction -R -E --triggers --def ...