面试之HTML5 Web存储
前几天面试遇到了一个题是问localStorage和sessionStorage的区别,当时的回答不是很全面,今天就针对这个问题做一下整理(概念,用法,区别)
HTML5 Web存储,一个比 cookie 更好的本地存储方式,什么是 HTML Web存储?
定义:使用HTML5 可以在本地存储用户的浏览数据。早些时候,本地存储使用的是 cookie,但是Web存储需要加载更加的安全与快速,这些数据不会被保存在服务器上,但是这些数据只用于用户请求网站,它也可以存储大量的数据,而不影响网站的性能。(数据以键/值对存在,web网页的数据只允许该网页访问使用)
localStorage(本地存储)
localStorage 对象存储的数据没有时间限制,用于长久保存整个网站的数据
常用API(localStorage相当于window下面的一个属性,故可以使用 . 方法和 [] 方法)
- 保存数据
localStorage.name = 'zhangsan'
// 或者
localStorage.['name'] = 'zhangsan'
// 或者
localStorage.getIten('name','zhangsan') - 读取数据
// 自身方法
localStorage.getItem("name");
// []方法
localStorage["name"];
// .方法
localStorage.name; - 删除单个数据(使用delete关键字)
// 自身方法
localStorage.removeItem("name");
// []方法
delete localStorage["name"];
// .方法
delete localStorage.name - 删除所有数据
localStorage.clear()
- 得到某个索引的值
1 // 通过自身的key
2 for (var i=0;i<localStorage.length;i++) {
3 console.log(localStorage.key(i));
4 }
5
6 // 通过for in 循环获取
7 for(var key in localStorage){
8 console.log(key);
9 } - 获取所有值
localStorage.valueOf();取出所有的值
- 判断是否具有某个key
localStorage.hasOwnProperty("name")
// 如果存在的话返回true,不存在返回false
注:1.localStorage特定于页面的协议,不在同一域名下不能访问
2.数据有大小限制,5M左右,不同浏览器大小会有不同
3.生命周期是永久的,但是数据实际是存在浏览器的文件夹下的,卸载浏览器数据可能就会删除
4.浏览器可以设置是否可以访问数据,如果设置不允许则会访问失败
5.兼容IE8以上浏览器
6.默认情况下是以字符串形式存储的,可以根据个人需要进行数据类型转换
sessionStorage(会话存储)
sessionStorage 方法针对一个 session 进行数据存储。当用户关闭浏览器窗口后,数据会被删除
常用API(同上,和localStorage类似)
注意事项也和localStorage类似,唯一不同的就是数据存储周期不一样
面试之HTML5 Web存储的更多相关文章
- HTML5 Web存储(Web Storage)技术及用法
在如今的Web开发中,HTML5是大家讨论的最大一个话题.HTML5提供的新功能特征使得Web程序员如虎添翼,并免去了以往钻研各种方法来让网站更好.更快.更灵活的气力.这些新功能中有一个非常让我感兴趣 ...
- HTML5 web 存储
简介: HTML5 web 存储,一个比cookie更好的本地存储方式. 首先我们先了解一下: 什么是 HTML5 Web 存储? 使用html5可以在本地存储用户的浏览数据. 早些时候,本地存储使用 ...
- HTML5 Web存储 页面间进行传值
在实际使用过程中,经常会遇到需要在页面间进行传值的情况,最初设想一定需要后端才能进行数据的存储和读取,或者在本地使用一个cookie进行保存,直到了解到HTML5 Web存储 使用HTML5的新特性可 ...
- HTML5: HTML5 Web 存储
ylbtech-HTML5: HTML5 Web 存储 1.返回顶部 1. HTML5 Web 存储 HTML5 web 存储,一个比cookie更好的本地存储方式. 什么是 HTML5 Web 存储 ...
- 有趣的HTML5 Web 存储
HTML5 web 存储,一个比cookie更好的本地存储方式. 什么是 HTML5 Web 存储? 使用HTML5可以在本地存储用户的浏览数据. 早些时候,本地存储使用的是 cookie.但是Web ...
- 【读书笔记】HTML5 Web存储
PS:这里讲web存储,主要是在客户端存储的一些技术:cookie,localstorage,sessionstorage,WebSQL. Cookie Cookie是HTML4中在客户端 ...
- HTML5本地化应用开发-HTML5 Web存储详解
文章不是简单的的Ctrl C与V,而是一个字一个标点符号慢慢写出来的.我认为这才是是对读者的负责,本教程由技术爱好者成笑笑(博客:http://www.chengxiaoxiao.com/)写作完成. ...
- HTML5 web存储
既然涉及到HTML5知识,那么必定会存在一定的兼容性问题,这里就涉及到浏览器的支持情况了. 浏览器支持情况: Internet Explorer 8+, Firefox, Opera, Chrome, ...
- 使用HTML5 Web存储的localStorage和sessionStorage方式
localStorage(本地存储),可以长期存储数据,没有时间限制,一天,一年,两年甚至更长,数据都可以使用.sessionStorage(会话存储),只有在浏览器被关闭之前使用,创建另一个页面时同 ...
随机推荐
- Servlet的入门案例
编写入门案例 1)编写java类,继承HttpServlet类 2)重新doGet和doPost方法 3)Servlet程序交给tomcat服务器运行!! 3.1 servlet程序的class码拷贝 ...
- linux高可用集群(HA)原理详解
高可用集群 一.什么是高可用集群 高可用集群就是当某一个节点或服务器发生故障时,另一个节点能够自动且立即向外提供服务,即将有故障节点上的资源转移到另一个节点上去,这样另一个节点有了资源既可以向外提供服 ...
- 009-DNS域名解析系统
一.概述 DNS是域名系统(DomainNameSystem)的缩写,该系统用于命名组织到域层次结构中的计算机和网络服务.域名是由圆点分开一串单词或缩写组成的,每一个域名都对应一个惟一的IP地址,在I ...
- Java FTP客户端开源类库 edtFTPj
edtFTPj/Free是免费的流行的Java FTP库,全球公司依靠edtFTPj /Free 为它们的Java应用程序添加FTP客户端功能. (收费的支持SFTP.FTPS的edtFTPj/PRO ...
- Linux-文件系统的简单操作
文件系统的简单操作 磁盘与目录的容量:df.du df [option] [目录或文件名] 参数: -a:列出所有的文件系统,包括系统特有的/proc等系统 -k:以KB的容量显示各文件系统 -m:以 ...
- [Python]Excel编程示例教程(openpyxl)
1 前言(Preface) 博文背景:论文实验中有一大堆数据集需要观测其数据特征,通过人体肉眼,难以直观感受,故而准备通过生成Excel,可视化其评测数据. We know: Excel便于可视化分析 ...
- NLP之ROUGE[笔记]
0 前言 [定义]ROUGE:recall-oriented understanding for gisting evaluation,面向召回的要点评估理解 召回率,recall rate;要点,g ...
- IOS上的 Audio Memos SE 如何分享和传输录音到电脑?
Audio Memos SE 是 Audio Memos 的精简版 ,顾名思义就是少了很多实用功能.当初下载这个就是因为广告比较少一些,没有全屏幕的广告. 好了,录了音,想分享和传到电脑要怎么弄呢? ...
- VScode中文乱码的问题
在vscode中打开文件,文件中的中文乱码了.解决方案: 1.vscode右下角,点击utf-8 (选择编码) 2.出现下面选择框,点击第一个 3.输入gb2312,如图选择 4.此刻解决乱码问题了. ...
- 牛客竞赛(gcd,快速幂)
一.最大公约数和最小公倍数问题 题目描述: 输入2个正整数x0,y0(2<=x0<100000,2<=y0<=1000000),求出满足下列条件的P,Q的个数. 条件:1.P, ...