前几天面试遇到了一个题是问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存储的更多相关文章

  1. HTML5 Web存储(Web Storage)技术及用法

    在如今的Web开发中,HTML5是大家讨论的最大一个话题.HTML5提供的新功能特征使得Web程序员如虎添翼,并免去了以往钻研各种方法来让网站更好.更快.更灵活的气力.这些新功能中有一个非常让我感兴趣 ...

  2. HTML5 web 存储

    简介: HTML5 web 存储,一个比cookie更好的本地存储方式. 首先我们先了解一下: 什么是 HTML5 Web 存储? 使用html5可以在本地存储用户的浏览数据. 早些时候,本地存储使用 ...

  3. HTML5 Web存储 页面间进行传值

    在实际使用过程中,经常会遇到需要在页面间进行传值的情况,最初设想一定需要后端才能进行数据的存储和读取,或者在本地使用一个cookie进行保存,直到了解到HTML5 Web存储 使用HTML5的新特性可 ...

  4. HTML5: HTML5 Web 存储

    ylbtech-HTML5: HTML5 Web 存储 1.返回顶部 1. HTML5 Web 存储 HTML5 web 存储,一个比cookie更好的本地存储方式. 什么是 HTML5 Web 存储 ...

  5. 有趣的HTML5 Web 存储

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

  6. 【读书笔记】HTML5 Web存储

    PS:这里讲web存储,主要是在客户端存储的一些技术:cookie,localstorage,sessionstorage,WebSQL.     Cookie   Cookie是HTML4中在客户端 ...

  7. HTML5本地化应用开发-HTML5 Web存储详解

    文章不是简单的的Ctrl C与V,而是一个字一个标点符号慢慢写出来的.我认为这才是是对读者的负责,本教程由技术爱好者成笑笑(博客:http://www.chengxiaoxiao.com/)写作完成. ...

  8. HTML5 web存储

    既然涉及到HTML5知识,那么必定会存在一定的兼容性问题,这里就涉及到浏览器的支持情况了. 浏览器支持情况: Internet Explorer 8+, Firefox, Opera, Chrome, ...

  9. 使用HTML5 Web存储的localStorage和sessionStorage方式

    localStorage(本地存储),可以长期存储数据,没有时间限制,一天,一年,两年甚至更长,数据都可以使用.sessionStorage(会话存储),只有在浏览器被关闭之前使用,创建另一个页面时同 ...

随机推荐

  1. Servlet的入门案例

    编写入门案例 1)编写java类,继承HttpServlet类 2)重新doGet和doPost方法 3)Servlet程序交给tomcat服务器运行!! 3.1 servlet程序的class码拷贝 ...

  2. linux高可用集群(HA)原理详解

    高可用集群 一.什么是高可用集群 高可用集群就是当某一个节点或服务器发生故障时,另一个节点能够自动且立即向外提供服务,即将有故障节点上的资源转移到另一个节点上去,这样另一个节点有了资源既可以向外提供服 ...

  3. 009-DNS域名解析系统

    一.概述 DNS是域名系统(DomainNameSystem)的缩写,该系统用于命名组织到域层次结构中的计算机和网络服务.域名是由圆点分开一串单词或缩写组成的,每一个域名都对应一个惟一的IP地址,在I ...

  4. Java FTP客户端开源类库 edtFTPj

    edtFTPj/Free是免费的流行的Java FTP库,全球公司依靠edtFTPj /Free 为它们的Java应用程序添加FTP客户端功能. (收费的支持SFTP.FTPS的edtFTPj/PRO ...

  5. Linux-文件系统的简单操作

    文件系统的简单操作 磁盘与目录的容量:df.du df [option] [目录或文件名] 参数: -a:列出所有的文件系统,包括系统特有的/proc等系统 -k:以KB的容量显示各文件系统 -m:以 ...

  6. [Python]Excel编程示例教程(openpyxl)

    1 前言(Preface) 博文背景:论文实验中有一大堆数据集需要观测其数据特征,通过人体肉眼,难以直观感受,故而准备通过生成Excel,可视化其评测数据. We know: Excel便于可视化分析 ...

  7. NLP之ROUGE[笔记]

    0 前言 [定义]ROUGE:recall-oriented understanding for gisting evaluation,面向召回的要点评估理解 召回率,recall rate;要点,g ...

  8. IOS上的 Audio Memos SE 如何分享和传输录音到电脑?

    Audio Memos SE 是 Audio Memos 的精简版 ,顾名思义就是少了很多实用功能.当初下载这个就是因为广告比较少一些,没有全屏幕的广告. 好了,录了音,想分享和传到电脑要怎么弄呢? ...

  9. VScode中文乱码的问题

    在vscode中打开文件,文件中的中文乱码了.解决方案: 1.vscode右下角,点击utf-8 (选择编码) 2.出现下面选择框,点击第一个 3.输入gb2312,如图选择 4.此刻解决乱码问题了. ...

  10. 牛客竞赛(gcd,快速幂)

    一.最大公约数和最小公倍数问题 题目描述: 输入2个正整数x0,y0(2<=x0<100000,2<=y0<=1000000),求出满足下列条件的P,Q的个数. 条件:1.P, ...