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. JAVA类,变量的赋值一个小细节,以及static标注变量的意义

    在JAVA类中方法外部定义的变量,如果定义的时候没有赋值,那么在方法外也不能对其进行赋值,否则报错,只能放入某一个方法内对其赋值.(为何报错待晚些时候深入查找补充) static标注的变量称为静态变量 ...

  2. [hdu1176]免费馅饼(数塔dp)

    题意:中文题,不解释了 = = 解题关键:逆推,转化为数塔dp就可以了 dp[i][j]表示在i秒j位置的最大值. 转移方程:$dp[i][j] = \max (dp[i + 1][j],dp[i + ...

  3. [原创]SQL 把表中某一个列按照逗号拼接成一行

    在我们开发的过程中,难免遇到一种场景,把某个表中的的某个列的值拼接成用逗号隔开的一行数据 如图:我们把UserId列拼接成一行数据 -------> 为此我写了一个存储过程来解决此类问题. -- ...

  4. Java Learning 001 新建一个Java工程 HelloWorld程序

    Java Learning 001 新建一个Java工程 HelloWorld程序 Step 1 . 在Eclipse 软件里,点击: File -> New -> Java Projec ...

  5. 第 2 章 Python 语言入⻔

    目录 2.1低而长的学习曲线 2.2Python的优势 2.3在你的计算机中安装Python 2.4如何运行Python程序 2.5文本编辑器 2.6寻求帮助 Python语言是一种流行的编程语言,在 ...

  6. Struts2学习第六课 实现登录登出功能

    关于Struts2请求的扩展名问题: 1).org.apache.struts2包下的default.properties中配置了struts2应用的一些常量 2).struts.action.ext ...

  7. 使用Paramiko的问题

    在使用Paramiko远程登录的时候,会报sudo: sorry, you must have a tty to run sudo 切换到root用户,使用visudo命令,然后就会打开一个文本,在文 ...

  8. 关于.net中的身份认证(AuthorizeAttribute)的问题

    引言 新公司当初面试的时候问了我很多用户验证的问题,这里就把我的对于验证的想法写一下,希望可以有一个系统的学习记录. 一.如何验证 B/S结构的请求是http请求,个人理解的http请求有两个特点:1 ...

  9. 项目:IT资源共享资源(登录前端)<1>

    公众号技术标签 小程序 PHP 源码 项目 IT资源共享项目 这是前年自己收集了一些网络开发资源,上传到百度网盘,提供积分兑换.上线后用户在两个月内达到3427人,其中用java,PHP,前端,Pyt ...

  10. 洛谷P3146 [USACO16OPEN]248

    P3146 [USACO16OPEN]248 题目描述 Bessie likes downloading games to play on her cell phone, even though sh ...