HTML 本地存储
HTML 本地存储:优于 cookies。
什么是 HTML 本地存储?
通过本地存储(Local Storage),web 应用程序能够在用户浏览器中对数据进行本地的存储。
在 HTML5 之前,应用程序数据只能存储在 cookie 中,包括每个服务器请求。本地存储则更安全,并且可在不影响网站性能的前提下将大量数据存储于本地。
与 cookie 不同,存储限制要大得多(至少5MB),并且信息不会被传输到服务器。
本地存储经由起源地(origin)(经由域和协议)。所有页面,从起源地,能够存储和访问相同的数据。
HTML 本地存储对象
HTML 本地存储提供了两个在客户端存储数据的对象:
- window.localStorage - 存储没有截止日期的数据
- window.sessionStorage - 针对一个 session 来存储数据(当关闭浏览器标签页时数据会丢失)
在使用本地存储时,请检测 localStorage 和 sessionStorage 的浏览器支持:
- if (typeof(Storage) !== "undefined") {
- // 针对 localStorage/sessionStorage 的代码
- } else {
- // 抱歉!不支持 Web Storage ..
- }
localStorage 对象
localStorage 对象存储的是没有截止日期的数据。当浏览器被关闭时数据不会被删除,在下一天、周或年中,都是可用的。
实例
- <!DOCTYPE html>
- <html>
- <body>
- <div id="result"></div>
- <script>
- // 请检测 localStorage 和 sessionStorage 的浏览器支持
- if (typeof(Storage) !== "undefined") {
- // 存储
- localStorage.setItem("lastname", "Gates");
- // 取回
- document.getElementById("result").innerHTML = localStorage.getItem("lastname");
- } else {
- document.getElementById("result").innerHTML = "抱歉!您的浏览器不支持 Web Storage ...";
- }
- </script>
- </body>
- </html>
实例解释:
- 创建 localStorage 名称/值对,其中:name="lastname",value="Gates"
- 取回 "lastname" 的值,并把它插到 id="result" 的元素中
上例也可这样写:
- // 存储
- localStorage.lastname = "Gates";
- // 取回
- document.getElementById("result").innerHTML = localStorage.lastname;
删除 "lastname" localStorage 项目的语法如下:
- localStorage.removeItem("lastname");
注释:名称/值对始终存储为字符串。如果需要请记得把它们转换为其他格式!
下面的例子对用户点击按钮的次数进行计数。在代码中,值字符串被转换为数值,依次对计数进行递增:
实例
- <!DOCTYPE html>
- <html>
- <head>
- <script>
- function clickCounter() {
- if(typeof(Storage) !== "undefined") {
- if (localStorage.clickcount) {
- localStorage.clickcount = Number(localStorage.clickcount)+1;
- } else {
- localStorage.clickcount = 1;
- }
- document.getElementById("result").innerHTML = "您已经点击这个按钮 " + localStorage.clickcount + " 次。";
- } else {
- document.getElementById("result").innerHTML = "抱歉!您的浏览器不支持 Web Storage ...";
- }
- }
- </script>
- </head>
- <body>
- <p><button onclick="clickCounter()" type="button">请点击这里!</button></p>
- <div id="result"></div>
- <p>请点击按钮使计数器递增。</p>
- <p>请关闭浏览器或标签页,然后再试一次,计数器将继续计数(不会重置)。</p>
- </body>
- </html>
sessionStorage 对象
sessionStorage 对象等同 localStorage 对象,不同之处在于只对一个 session 存储数据。如果用户关闭具体的浏览器标签页,数据也会被删除。
下例在当前 session 中对用户点击按钮进行计数:
实例
- <!DOCTYPE html>
- <html>
- <head>
- <script>
- function clickCounter() {
- if(typeof(Storage) !== "undefined") {
- if (sessionStorage.clickcount) {
- sessionStorage.clickcount = Number(sessionStorage.clickcount)+1;
- } else {
- sessionStorage.clickcount = 1;
- }
- document.getElementById("result").innerHTML = "在本 session 中,您已经点击这个按钮 " + sessionStorage.clickcount + " 次。";
- } else {
- document.getElementById("result").innerHTML = "抱歉!您的浏览器不支持 Web Storage ...";
- }
- }
- </script>
- </head>
- <body>
- <p><button onclick="clickCounter()" type="button">请点击这里</button></p>
- <div id="result"></div>
- <p>请点击按钮使计数器递增。</p>
- <p>请关闭浏览器或标签页,然后再试一次,计数器会重置。</p>
- </body>
- </html>
HTML 本地存储的更多相关文章
- 基于本地存储的kvm虚拟机在线迁移
基于本地存储的kvm虚拟机在线迁移 kvm虚拟机迁移分为4种(1)热迁移基于共享存储(2)热迁移基于本地存储(3)冷迁移基于共享存储(4)冷迁移基于本地存储 这里介绍的是基于本地存储的热迁移 动态块迁 ...
- HTML5 localStorage本地存储
介绍 localStorage(本地存储)的使用方式.包括对存储对象的添加.修改.删除.事件触发等操作. 目录 1. 介绍 1.1 说明 1.2 特点 1.3 浏览器最小版本支持 1.4 适合场景 2 ...
- HTML5笔记:跨域通讯、多线程、本地存储和多图片上传技术
最近做项目在前端我使用了很多新技术,这些技术有bootstrap.angularjs,不过最让我兴奋的还是使用了HTML5的技术,今天我想总结一些HTML5的技术,好记性不如烂笔头,写写文章可以很好的 ...
- HTML5 学习总结(三)——本地存储
一.HTML4客户端存储 B/S架构的应用大量的信息存储在服务器端,客户端通过请求响应的方式从服务器获得数据,这样集中存储也会给服务器带来相应的压力,有些数据可以直接存储在客户端,传统的Web技术中会 ...
- Javascript本地存储小结
前言 总括:详细讲述Cookie,LocalStorge,SesstionStorge的区别和用法. 人生如画,岁月如歌. 原文博客地址:Javascript本地存储小结 知乎专栏&& ...
- H5 本地存储一
localStorage(本地存储),可以长期存储数据,没有时间限制,一天,一年,两年甚至更长,数据都可以使用.sessionStorage(会话存储),只有在浏览器被关闭之前使用,创建另一个页面时同 ...
- 初识html5的localStorage本地存储
一.概述 HTML5 提供了两种在客户端存储数据的新方法: localStorage - 没有时间限制的数据存储 sessionStorage - 针对一个 session 的数据存储 之前,这些都是 ...
- IndexedDB(本地存储)
var students = [{ id: 1001, name: "Byron", age: 24 }, { id: 1002, name: "Frank", ...
- 关于HTML5本地缓存技术LocalStorage 本地存储 和 SessionStorage
如果你想在用户访问的时候记录或者记住他们的行为,你会想到的是什么,cookie 和session.但今天告诉你还有两种或者说是1种吧 那就是html5的 LocalStorage 本地存储和 Sess ...
- localstorage 和 sessionstorage 本地存储
在我们日常的工作和实际项目中,做好数据数据缓存可以是我们的程序执行效率更高,可以使我们避免重复请求 服务器,减轻服务器的压力,可以提高使用户的体验度. 那么 HTML5 存储的目标是什么? 1.解决存 ...
随机推荐
- Asp.Net MVC Web API 中Swagger教程,使用Swagger创建Web API帮助文件
什么是Swagger? Swagger 是一个规范和完整的框架,用于生成.描述.调用和可视化 RESTful 风格的 Web 服务.总体目标是使客户端和文件系统作为服务器以同样的速度来更新.文件的方法 ...
- Docker从入门到掉坑(四):上手k8s避坑指南
在之前的几篇文章中,主要还是讲解了关于简单的docker容器该如何进行管理和操作,在接下来的这篇文章开始,我们将开始进入对于k8s模块的学习 不熟悉的可以先回顾之前的章节,Docker教程系列文章将归 ...
- 基于windows server 2016和sqlserver 2016 AlwaysOn的群集配置
文档:基于windows server 2016和sqlserver 2...链接:http://note.youdao.com/noteshare?id=4f07c1c3f7d0e32b7631d7 ...
- Linux 使用grep过滤多个条件及grep常用过滤命令
这篇文章主要介绍了Linux 使用grep筛选多个条件及grep常用过滤命令,需要的朋友可以参考下 cat log.txt | grep 条件: cat log.txt | grep 条件一 | gr ...
- RF之关键字、变量、循环
关键字的使用: RF的能力是由关键字提供的,所以,我们必须对RF的常用关键字有个了解 . 最常用的关键字就在RF的关键字中.http://robotframework.org 其中Builtin是标准 ...
- 《Hands-On System Programming with Go》之目录操作
开一个新书<Hands-On System Programming with Go>,系统的了解一下, 这方面的东东,以前用C语言实现过, 现在用GO,重新来!! package main ...
- React的世界观及与Vue之比较
写在前面:本文谈论的是主观的个人感受,不追求立场的“客观.公正”,因此我下面所说的很可能是错的,欢迎交流指正. 我学习前端时,跟大部分beginner一样,学的第一个框架是Vue,入职后也一直写Vue ...
- 爬b站视频直链
本来用的api爬取的url失效了(可能是) 就换成了貌似切换不了清晰度的api接口 http://api.bilibili.com/playurl?aid=61735306&page=1&am ...
- python网络爬虫之解析网页的BeautifulSoup(爬取电影图片)[三]
目录 前言 一.BeautifulSoup的基本语法 二.爬取网页图片 扩展学习 后记 前言 本章同样是解析一个网页的结构信息 在上章内容中(python网络爬虫之解析网页的正则表达式(爬取4k动漫图 ...
- 编译Netty源码遇到的一些问题-缺少io.netty.util.collection包
缺少包和java类 下载好Netty的源码后,导入到IDE,运行自带的example时编译不通过. 如下图,是因为io.netty.util.collection的包没有 点进去看,确实没有这个包 发 ...