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. How To Find Out Attachments By File Type In Outlook?

    ext: (extension extension) Take the attachments of zip files and of txt files for example, just ente ...

  2. python常用函数 E

    endswith(str/tuple) 末尾元素匹配,可以传入tuple. 例子: enumerate(iterable) 可以跟踪集合元素索引,适用于迭代器. 例子: eval(str) 可以字符串 ...

  3. bzoj1190 [HNOI2007]梦幻岛宝珠 背包

    题目 https://lydsy.com/JudgeOnline/problem.php?id=1190 题解 好神仙的一道题啊. 既然 \(w_i = a_i\cdot 2^{b_i}\),那么不妨 ...

  4. 16_3.jdk动态代理与aop

    jdk动态代理: public interface Subject { void say(String name,int age); } public class RealSubject implem ...

  5. Spring---Spring Aware

    1.概述 1.1.Spring中的  所有Bean  对Spring容器的存在  是没有意识的(即你可以将容器换成别的容器,这样使用容器与Bean之间的耦合度很低): 但在实际项目中,不可避免的要用到 ...

  6. SVN查看所有人的日志提交记录

    1. svn默认显示最近一周的文件提交和修改记录,怎么查看更长时间的日志记录呢? 2. TortoiseSVN 3. 点击show all 或者NEXT 100,就可显示更长时间的文件提交记录.

  7. js image转canvas不显示

    今天在项目开发中遇到了image转canvas不显示的问题,最后翻了不少资料才发现问题出现在图片加载上 如果你的代码是这样的,那么不显示的原因就是img没有加载完成 function convertI ...

  8. 【leetcode】1019. Next Greater Node In Linked List

    题目如下: We are given a linked list with head as the first node.  Let's number the nodes in the list: n ...

  9. ROS基础学习总结

    最近一周因为工程需要,把ROS的一些基础学习了一下,现在做一下总结. 学习资源: #创客智造整理的wiki上的ROS入门教程(中文)https://www.ncnynl.com/category/ro ...

  10. ssm框架错误展示-1

    1.xmlParse错误+找不到bean ,一般会出现在导入别的地方拷来的项目时发生,报了以下错误: 查看自己的项目配置文件,发现spring的配置文件和sql映射xml文件都有个黄颜色的感叹号,鼠标 ...