Web Storage API 提供了存储机制,通过该机制,浏览器可以安全地存储键值对,比使用 cookie 更加直观。

Web Storage 包含如下两种机制:

  • sessionStorage 为每一个给定的源(given origin)维持一个独立的存储区域,该存储区域在页面会话期间可用(即只要浏览器处于打开状态,包括页面重新加载和恢复)。
  • localStorage 同样的功能,但是在浏览器关闭,然后重新打开后数据仍然存在。

localStorage和sessionStorage是相似的,除了存在前者的数据没有到期时间而存在后者的数据会被清除当浏览器关闭。例子:添加或更新数据项:localStorage.setItem('myCat','Tom');,读数据项:var cat = localStorage.getItem('myCat');,移除数据项:localStorage.removeItem('myCat');或localStorage.clear();,后者不接受参数,只是简单地清空域名对应的整个存储对象。

IE和Edge不支持在本地HTML文件上用localStorage,火狐可以。

localstorage中只能存储字符串。如果想存对象数组/对象/数组,则存之前要把数据变成JON,读时再把数据从JSON变回来。队JSON用typeof的结果是字符串。

真正项目中,大部分是通过Ajax和Server通过接口来实现对于数据的写操作,可以通过自己写一个简单的服务代码来学习前后端数据通信的主要方式Ajax。

学习笔记:Web Storage API的更多相关文章

  1. golang学习笔记10 beego api 用jwt验证auth2 token 获取解码信息

    golang学习笔记10 beego api 用jwt验证auth2 token 获取解码信息 Json web token (JWT), 是为了在网络应用环境间传递声明而执行的一种基于JSON的开放 ...

  2. web API简介(三):客户端储存之Web Storage API

    概述 前篇:web API简介(二):客户端储存之document.cookie API 客户端储存从某一方面来说和动态网站差不多.动态网站是用服务端来储存数据,而客户端储存是用客户端来储存数据. W ...

  3. Web Storage API:localStorage 和 SessionStorage

    Web Storage API 提供了存储机制,通过该机制,浏览器可以安全地存储键值对,比使用 cookie 更加直观. 参考:https://developer.mozilla.org/zh-CN/ ...

  4. Web Storage API的介绍和使用

    目录 简介 浏览器的本地存储技术 Web Storage相关接口 浏览器兼容性 隐身模式 使用Web Storage API 总结 简介 Web Storage为浏览器提供了方便的key value存 ...

  5. ZooKeeper学习笔记二:API基本使用

    Grey ZooKeeper学习笔记二:API基本使用 准备工作 搭建一个zk集群,参考ZooKeeper学习笔记一:集群搭建. 确保项目可以访问集群的每个节点 新建一个基于jdk1.8的maven项 ...

  6. Web Storage API : LocalStroage

    这是一篇详细介绍详细介绍详细介绍_(:з」∠)_ 背景: 当你访问一个页面,并不是丢到服务器,等待用户访问就可以了的.从输入网址到显示网页的全过程,可以参考这里 简单来说,在输入url按下回车键后,首 ...

  7. Flink学习笔记:Flink API 通用基本概念

    本文为<Flink大数据项目实战>学习笔记,想通过视频系统学习Flink这个最火爆的大数据计算框架的同学,推荐学习课程: Flink大数据项目实战:http://t.cn/EJtKhaz ...

  8. flink学习笔记:DataSream API

    本文为<Flink大数据项目实战>学习笔记,想通过视频系统学习Flink这个最火爆的大数据计算框架的同学,推荐学习课程: Flink大数据项目实战:http://t.cn/EJtKhaz ...

  9. HTML5学习笔记 Web存储

    HTML5 web存储,一个比cookie更好的本地存储方式. 什么是html5 Web存储 使用HTML5可以在本地存储用户的浏览器数据. 早些时候,本地存储使用的是cookies.但是Web存储需 ...

随机推荐

  1. 【问题】Expandable数据集的定义的正确方法,TabActivity弃用替代,Gallery替代,imageswitcher

    Expandable 问题: http://www.cnblogs.com/xingyyy/p/3389611.html 扩展阅读:http://blog.csdn.net/lmj623565791/ ...

  2. Entity Framework Code-First(9.5):DataAnnotations - MaxLength Attribute

    DataAnnotations - MaxLength Attribute: MaxLength attribute can be applied to a string or array type ...

  3. 关于export环境变量生存期

    今天对export方式设置的环境变量的生存期有很大疑惑. 按变量的生存周期来划分,Linux变量可分为两类,它们的修改方法如下:(1)永久的:需要修改配置文件,变量永久生效.    常见的配置文件包括 ...

  4. ubuntu14编译SSF(ethzasl_sensor_fusion )

    参考:http://wiki.ros.org/ethzasl_sensor_fusion 1. cd catkin_ws/src/ 2 git clone git://github.com/ethz- ...

  5. 【OpenGL】Shader概述

    目录(?)[-] 综述 编译一个Shader 链接一个Shader 删除一个Shader 指定使用一个Shader Program 删除一个Shader Program 备注 这篇文章讲述了Shade ...

  6. asp.net 防止二次提交 以及UseSubmitBehavior属性-转

    页面上有一个按钮,点击之后提交表单,如果什么都不管的话,用户可以在服务器响应完成之前再次点击,这样就出现了二次提交,后果可大可小. 那么我们应该防止二次点击,就要在用户点第一次之后马上Disable这 ...

  7. C++基础之继承类和派生类

    (1)继承是创建一个具有某个类的属性和行为的新类的能力.原有的类称为基类,新创建的类称为派生类.派生类将基类中的所有成员作为自己的成员,同时派生类本身可以定义新的成员(2)派生类只有一个基类的继承称单 ...

  8. 反射实现数据库增删改查DAO及DAOImpl源代码(一)

    这是DAO层,第一次尝试,如有bug希望能即使反馈,我们共同进步.具体的用法和实现原理我会在前面几篇博客中补充更新.配置文件及项目目录结构会在下一篇中贴出! package com.javasm.su ...

  9. Openstack swift 学习笔记

    Swift 不是文件系统或者实时的数据存储系统,而是对象存储,用于长期存储永久类型的静态数据.这些数据可以检索.调整和必要时进行更新.Swift最适合虚拟机镜像.图片.邮件和存档备份这类数据的存储. ...

  10. 洛谷P1912 [NOI2009]诗人小G(决策单调性)

    传送门 题解 决策单调性是个啥……导函数是个啥……这题解讲的是啥……我是个啥…… //minamoto #include<iostream> #include<cstdio> ...