HTML 本地存储：优于 cookies。

什么是 HTML 本地存储？

通过本地存储（Local Storage），web 应用程序能够在用户浏览器中对数据进行本地的存储。

在 HTML5 之前，应用程序数据只能存储在 cookie 中，包括每个服务器请求。本地存储则更安全，并且可在不影响网站性能的前提下将大量数据存储于本地。

与 cookie 不同，存储限制要大得多（至少5MB），并且信息不会被传输到服务器。

本地存储经由起源地（origin）（经由域和协议）。所有页面，从起源地，能够存储和访问相同的数据。

HTML 本地存储对象

HTML 本地存储提供了两个在客户端存储数据的对象：

  • window.localStorage - 存储没有截止日期的数据
  • window.sessionStorage - 针对一个 session 来存储数据（当关闭浏览器标签页时数据会丢失）

在使用本地存储时，请检测 localStorage 和 sessionStorage 的浏览器支持：

  1. if (typeof(Storage) !== "undefined") {
  2.     // 针对 localStorage/sessionStorage 的代码
  3. } else {
  4.     // 抱歉！不支持 Web Storage ..
  5. }

localStorage 对象

localStorage 对象存储的是没有截止日期的数据。当浏览器被关闭时数据不会被删除，在下一天、周或年中，都是可用的。

实例

  1. <!DOCTYPE html>
  2. <html>
  3. <body>
  4.  
  5. <div id="result"></div>
  6.  
  7. <script>
  8. // 请检测 localStorage 和 sessionStorage 的浏览器支持
  9. if (typeof(Storage) !== "undefined") {
  10.     // 存储
  11.     localStorage.setItem("lastname", "Gates");
  12.     // 取回
  13.     document.getElementById("result").innerHTML = localStorage.getItem("lastname");
  14. } else {
  15.     document.getElementById("result").innerHTML = "抱歉！您的浏览器不支持 Web Storage ...";
  16. }
  17. </script>
  18.  
  19. </body>
  20. </html>

实例解释：

  • 创建 localStorage 名称/值对，其中：name="lastname"，value="Gates"
  • 取回 "lastname" 的值，并把它插到 id="result" 的元素中

上例也可这样写：

  1. // 存储
  2. localStorage.lastname = "Gates";
  3. // 取回
  4. document.getElementById("result").innerHTML = localStorage.lastname;

删除 "lastname" localStorage 项目的语法如下：

  1. localStorage.removeItem("lastname");

注释：名称/值对始终存储为字符串。如果需要请记得把它们转换为其他格式！

下面的例子对用户点击按钮的次数进行计数。在代码中，值字符串被转换为数值，依次对计数进行递增：

实例

  1.  <!DOCTYPE html>
  2.  <html>
  3.  <head>
  4.  <script>
  5.  function clickCounter() {
  6.      if(typeof(Storage) !== "undefined") {
  7.          if (localStorage.clickcount) {
  8.              localStorage.clickcount = Number(localStorage.clickcount)+1;
  9.          } else {
  10.              localStorage.clickcount = 1;
  11.          }
  12.          document.getElementById("result").innerHTML = "您已经点击这个按钮 " + localStorage.clickcount + " 次。";
  13.      } else {
  14.          document.getElementById("result").innerHTML = "抱歉！您的浏览器不支持 Web Storage ...";
  15.      }
  16.  }
  17.  </script>
  18.  </head>
  19.  <body>
  20.  <p><button onclick="clickCounter()" type="button">请点击这里！</button></p>
  21.  <div id="result"></div>
  22.  <p>请点击按钮使计数器递增。</p>
  23.  <p>请关闭浏览器或标签页，然后再试一次，计数器将继续计数（不会重置）。</p>
  24.  </body>
  25.  </html>

sessionStorage 对象

sessionStorage 对象等同 localStorage 对象，不同之处在于只对一个 session 存储数据。如果用户关闭具体的浏览器标签页，数据也会被删除。

下例在当前 session 中对用户点击按钮进行计数：

实例

  1.  <!DOCTYPE html>
  2.  <html>
  3.  <head>
  4.  <script>
  5.  function clickCounter() {
  6.      if(typeof(Storage) !== "undefined") {
  7.          if (sessionStorage.clickcount) {
  8.              sessionStorage.clickcount = Number(sessionStorage.clickcount)+1;
  9.          } else {
  10.              sessionStorage.clickcount = 1;
  11.          }
  12.          document.getElementById("result").innerHTML = "在本 session 中，您已经点击这个按钮 " + sessionStorage.clickcount + " 次。";
  13.      } else {
  14.          document.getElementById("result").innerHTML = "抱歉！您的浏览器不支持 Web Storage ...";
  15.      }
  16.  }
  17.  </script>
  18.  </head>
  19.  <body>
  20.  <p><button onclick="clickCounter()" type="button">请点击这里</button></p>
  21.  <div id="result"></div>
  22.  <p>请点击按钮使计数器递增。</p>
  23.  <p>请关闭浏览器或标签页，然后再试一次，计数器会重置。</p>
  24.  </body>
  25.  </html>

HTML 本地存储的更多相关文章

  1. 基于本地存储的kvm虚拟机在线迁移

    基于本地存储的kvm虚拟机在线迁移 kvm虚拟机迁移分为4种(1)热迁移基于共享存储(2)热迁移基于本地存储(3)冷迁移基于共享存储(4)冷迁移基于本地存储 这里介绍的是基于本地存储的热迁移 动态块迁 ...

  2. HTML5 localStorage本地存储

    介绍 localStorage(本地存储)的使用方式.包括对存储对象的添加.修改.删除.事件触发等操作. 目录 1. 介绍 1.1 说明 1.2 特点 1.3 浏览器最小版本支持 1.4 适合场景 2 ...

  3. HTML5笔记：跨域通讯、多线程、本地存储和多图片上传技术

    最近做项目在前端我使用了很多新技术,这些技术有bootstrap.angularjs,不过最让我兴奋的还是使用了HTML5的技术,今天我想总结一些HTML5的技术,好记性不如烂笔头,写写文章可以很好的 ...

  4. HTML5 学习总结（三）——本地存储

    一.HTML4客户端存储 B/S架构的应用大量的信息存储在服务器端,客户端通过请求响应的方式从服务器获得数据,这样集中存储也会给服务器带来相应的压力,有些数据可以直接存储在客户端,传统的Web技术中会 ...

  5. Javascript本地存储小结

    前言 总括:详细讲述Cookie,LocalStorge,SesstionStorge的区别和用法. 人生如画,岁月如歌. 原文博客地址:Javascript本地存储小结 知乎专栏&& ...

  6. H5 本地存储一

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

  7. 初识html5的localStorage本地存储

    一.概述 HTML5 提供了两种在客户端存储数据的新方法: localStorage - 没有时间限制的数据存储 sessionStorage - 针对一个 session 的数据存储 之前,这些都是 ...

  8. IndexedDB（本地存储）

    var students = [{ id: 1001, name: "Byron", age: 24 }, { id: 1002, name: "Frank", ...

  9. 关于HTML5本地缓存技术LocalStorage 本地存储 和 SessionStorage

    如果你想在用户访问的时候记录或者记住他们的行为,你会想到的是什么,cookie 和session.但今天告诉你还有两种或者说是1种吧 那就是html5的 LocalStorage 本地存储和 Sess ...

  10. localstorage 和 sessionstorage 本地存储

    在我们日常的工作和实际项目中,做好数据数据缓存可以是我们的程序执行效率更高,可以使我们避免重复请求 服务器,减轻服务器的压力,可以提高使用户的体验度. 那么 HTML5 存储的目标是什么? 1.解决存 ...

随机推荐

  1. Asp.Net MVC Web API 中Swagger教程，使用Swagger创建Web API帮助文件

    什么是Swagger? Swagger 是一个规范和完整的框架,用于生成.描述.调用和可视化 RESTful 风格的 Web 服务.总体目标是使客户端和文件系统作为服务器以同样的速度来更新.文件的方法 ...

  2. Docker从入门到掉坑(四)：上手k8s避坑指南

    在之前的几篇文章中,主要还是讲解了关于简单的docker容器该如何进行管理和操作,在接下来的这篇文章开始,我们将开始进入对于k8s模块的学习 不熟悉的可以先回顾之前的章节,Docker教程系列文章将归 ...

  3. 基于windows server 2016和sqlserver 2016 AlwaysOn的群集配置

    文档:基于windows server 2016和sqlserver 2...链接:http://note.youdao.com/noteshare?id=4f07c1c3f7d0e32b7631d7 ...

  4. Linux 使用grep过滤多个条件及grep常用过滤命令

    这篇文章主要介绍了Linux 使用grep筛选多个条件及grep常用过滤命令,需要的朋友可以参考下 cat log.txt | grep 条件: cat log.txt | grep 条件一 | gr ...

  5. RF之关键字、变量、循环

    关键字的使用: RF的能力是由关键字提供的,所以,我们必须对RF的常用关键字有个了解 . 最常用的关键字就在RF的关键字中.http://robotframework.org 其中Builtin是标准 ...

  6. 《Hands-On System Programming with Go》之目录操作

    开一个新书<Hands-On System Programming with Go>,系统的了解一下, 这方面的东东,以前用C语言实现过, 现在用GO,重新来!! package main ...

  7. React的世界观及与Vue之比较

    写在前面:本文谈论的是主观的个人感受,不追求立场的“客观.公正”,因此我下面所说的很可能是错的,欢迎交流指正. 我学习前端时,跟大部分beginner一样,学的第一个框架是Vue,入职后也一直写Vue ...

  8. 爬b站视频直链

    本来用的api爬取的url失效了(可能是) 就换成了貌似切换不了清晰度的api接口 http://api.bilibili.com/playurl?aid=61735306&page=1&am ...

  9. python网络爬虫之解析网页的BeautifulSoup(爬取电影图片)[三]

    目录 前言 一.BeautifulSoup的基本语法 二.爬取网页图片 扩展学习 后记 前言 本章同样是解析一个网页的结构信息 在上章内容中(python网络爬虫之解析网页的正则表达式(爬取4k动漫图 ...

  10. 编译Netty源码遇到的一些问题-缺少io.netty.util.collection包

    缺少包和java类 下载好Netty的源码后,导入到IDE,运行自带的example时编译不通过. 如下图,是因为io.netty.util.collection的包没有 点进去看,确实没有这个包 发 ...