1、本地存储特性

　1. 数据存储在用户浏览器中

　2. 设置，读取方便，设置页面刷新不丢失数据　　

　3. 容量较大，sessionStorage约5M，localStorage约20M

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

2、window.sessionStorage

　1.生命周期为关闭浏览器窗口

　2.在同一个窗口（页面）下数据可以共享

　3.以键值对的形式存储使用

存储数据：

　sessionStorage.setItem(key,value);
　例：sessionStorage.setItem('uname','andy');

获取数据：

  sessionStorage.getItem(key);
　例：sessionStorage.getItem('uname');

删除数据：

  sessionStorage.removeItem(key);
　例：sessionStorage.removeItem('uname');

删除所有数据：

　 sessionStorage.clear();  //尽量避免使用

3、window.localStorage

　1. 生命周期永久生效，除非手动删除，否则关闭页面也会存在　　

　2. 可以多窗口（页面）共享（同一浏览器可以共享）

　3. 以键值对的形式存储使用

存储数据：

　localStorage.setItem(key,value);
　例：localStorage.setItem('uname','andy');

获取数据：

  localStorage.getItem(key);
　例：localStorage.getItem('uname');

删除数据：

  localStorage.removeItem(key);
　例：localStorage.removeItem('uname');

删除所有数据：

　 localStorage.clear();  //尽量避免使用

记住用户名案例：

<!DOCTYPE html>

<html lang="en">

  <head>

    <meta charset="UTF-8" />

    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <meta http-equiv="X-UA-Compatible" content="ie=edge" />

    <title>Document</title>

    <style>

      input {

        vertical-align: middle;

      }

    </style>

  </head>

  <body>

    <input type="text" id="txt" />

    <input type="checkbox" id="check" />

    <label for="check">记住用户名</label>

    <script>

      var txt = document.querySelector("#txt");

      var check = document.querySelector("#check");

      var label = document.querySelector("label");

      txt.onblur = function() {

        var text = txt.value;

        // console.log(text);

        localStorage.setItem("uname", text);

      };

      (function() {

        var user = localStorage.getItem("uname");

        if (user) {

          txt.value = user;

          check.checked = true;

        } else {

          txt.value = null;

        }

      })();

    </script>

  </body>

</html>

本地存储（sessionStrorage，localStorage）的更多相关文章

  1. html5本地存储（localStorage）使用介绍

    1.html5几种存储形式 本地存储(localStorage && sessionStorage) 离线缓存(application cache) indexedDB 和 webSQ ...

  2. store.js - 轻松实现本地存储（LocalStorage）

    store.js 是一个兼容所有浏览器的 LocalStorage 包装器,不需要借助 Cookie 或者 Flash.store.js 会根据浏览器自动选择使用 localStorage.globa ...

  3. (转)HTML5开发学习（2）:本地存储之localStorage 、sessionStorage、globalStorage

    原文:http://www.cnblogs.com/xumingxiang/archive/2012/03/25/2416386.html HTML5开发学习(2):本地存储之localStorage ...

  4. web 本地存储 （localStorage、sessionStorage）

    web 本地存储 (localStorage.sessionStorage,cookie) localStorage(长期储存):即使关闭浏览器数据也不会删除,除非使用localStorage.cle ...

  5. [web 前端] web本地存储（localStorage、sessionStorage）

    cp from : https://blog.csdn.net/mjzhang1993/article/details/70820868 web 本地存储 (localStorage.sessionS ...

  6. web本地存储（localStorage、sessionStorage）

    web 本地存储 (localStorage.sessionStorage) 说明 对浏览器来说,使用 Web Storage 存储键值对比存储 Cookie 方式更直观,而且容量更大,它包含两种:l ...

  7. html5本地存储之localstorage 、本地数据库、sessionStorage简单使用示例

    这篇文章主要介绍了html5本地存储的localstorage .本地数据库.sessionStorage简单使用示例,需要的朋友可以参考下 html5的一个非常cool的功能,就是web stora ...

  8. js本地存储解决方案(localStorage与userData)

    WEB应用的快速发展,是的本地存储一些数据也成为一种重要的需求,实现的方案也有很多,最普通的就是cookie了,大家也经常都用,但是cookie的缺点是显而易见的,其他的方案比如:IE6以上的user ...

  9. 本地存储之localStorage

    localStorage 本地存储 .对象.存数据 .取数据 存储的数据量在20M左右 localStorage 是window下面的属性,用的时候可以省略window 数据只能存储字符串类型的 lo ...

  10. html5本地存储技术 localstorage

    html在使用的时候,例如在input框里面,用户输入信息的时候,一点提交信息就开始向后天交互 但是一刷新或者用户再打开一个新的网页又得重新输入,这就牵扯到本地存储的问题 LocalStorage,是 ...

随机推荐

  1. RequestMappingHandlerMapping详解

    我们先理简单梳理一个关系 关系梳理 spring ioc 是spring的核心,用来管理spring bean的生命周期 MVC 是一种使用 MVC(Model View Controller 模型- ...

  2. 【串线篇】Mybatis之模糊查询

    TeacherDao.xml sql语句:teacherName like #{name} 测试传值: teacher.setName(“%a%“):

  3. java ajax返回 Json 的 几种方式

    原文:https://blog.csdn.net/qq_26289533/article/details/78749057 方式 1. : 自写代码转 Json 需要  HttpHttpServlet ...

  4. AI比医生更好地发现皮肤癌，未来计算机技术可渗透医院

    未来机器人将取代医生?这可能是事实.为什么这么多年轻人选择计算机行业,因为这是一个趋势.据法新社报道,研究人员周二称,一项计算机技术比人类皮肤科医生在检测皮肤癌方面的表现要好得多,因为这项研究是为了寻 ...

  5. 2.xml约束技术----------dtd约束

    1.xml的约束 (1)为什么需要定义约束了 比如现在定义一个person的xml文件,只想要这个文件里面保存人的信息,比如name age等,但是如果在xml文件中写了一个元素<猫>,发 ...

  6. C#高级编程笔记 (6至10章节)运算符/委托/字符/正则/集合

    数学的复习,4^-2即是1/4/4的意思, 4^2是1*2*2的意思,而10^-2为0.01! 7.2运算符 符号 说明 例   ++ 操作数加1 int i=3; j=i++; 运算后i的值为4,j ...

  7. Ubuntu新建用户组

    新建用户组 sudo addgroup groupname 把现有用户加入新建的用户组 sudo adduser username groupname

  8. Halo（十二）

    @RequestBody @ResponseBody @RequestBody 1) 该注解用于读取 Request 请求的 body 部分数据,使用系统默认配置的 HttpMessageConver ...

  9. 英语单词deprecated

    deprecated 来源——fdisk /dev/sdb [root@centos65 ~]# fdisk /dev/sdb WARNING: DOS-compatible mode is depr ...

  10. Java序列化及反序列化

    序列化概念: 1.Java序列化与反序列化  Java序列化是指把Java对象转换为字节序列的过程:而Java反序列化是指把字节序列恢复为Java对象的过程. 2.为什么需要序列化与反序列化 我们知道 ...