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. centos6.x禁用ipv6的方法

    注意可能有两个网卡的情况,修改当前网卡才有效. cd /etc/sysconfig/network-scripts/ ls ifcfg-Auto_eth0 ifcfg-eth0 现在ipv6没流行,几 ...

  2. Linux 启动顺序

    Linux 启动顺序:1. BIOS自检2. 运行系统内核并检测硬件3. 运行系统的第一个进程init4. init读取系统引导配置文件/etc/inittab中的信息进行初始化            ...

  3. IQA(图像质量评估)

    图像质量评价(Image Quality Assessment,IQA)是图像处理中的基本技术之一,主要通过对图像进行特性分析研究,然后评估出图像优劣(图像失真程度). 主要的目的是使用合适的评价指标 ...

  4. “MVC+Nhibernate+Jquery-EasyUI” 信息发布系统 第三篇(登录窗口的实现以及如何保存登录者的信息)

    一.前言: 1.再看这篇文章的时候,您是否已经完成前两篇介绍的文章里的功能了?(Tabs页的添加,Tabs页右键的关闭,主题的更换)                 2.今天来说说登录窗口吧,看截图: ...

  5. 经典DP 嵌套矩形 (南洋理工ACM—16)

    本来是个很水的DP,结果被自己的代码习惯给打败了 代码: #include<iostream> #include<stdlib.h> #include<string.h& ...

  6. 自签名配置HTTPS

    基于AFN3.0 1.将后台提供的.cer文件文件保存至本地 2.在封装的网络请求工具类中为AFN的AFSecurityPolicy属性赋值 -(AFSecurityPolicy *)customSe ...

  7. 利用Fitnesse测试外部jar包

    1. 下载Fitnesse官方jar http://www.fitnesse.org/FitNesseDownload 2. 下载后,创建下面目录,其中FitnesseRoot目录,不需要创建,Fit ...

  8. oracle语句解析顺序

  9. NoSuchMethodError idea解决jar包冲突

    报NoSuchMethodError(使用spring boot框架idea)一般是jar包冲突 Exception in thread"main" java.lang.NoSuc ...

  10. SpringBoot2.0 基础案例(04):定时任务和异步任务的使用方式

    一.定时任务 1.基本概念 按照指定时间执行的程序. 2.使用场景 数据分析 数据清理 系统服务监控 二.同步和异步 1.基本概念 同步调用 程序按照代码顺序依次执行,每一行程序都必须等待上一行程序执 ...