1、localStorage 概念

HTML5 web 存储:HTML5 提供了两种在客户端存储数据的新方式:localStorage 和 sessionStorage ,两者都是仅在客户端(即浏览器)中保存,不参与和服务器的通信。

早些时候,本地存储使用的是 cookie,。但是 cookie 不适合大量数据的存储,后来 HTML5 提供了 localStorage 和 sessionStorage Web,这些数据不会被保存在服务器上,它也可以存储大量的数据,而不影响网站的性能。数据以键/值对存在且只允许该网页访问使用。

2、localStorage 特征

  • 生命周期:持久化的本地存储,保存的数据没有过期时间,直到手动去除。
  • 存储的信息在同一域中是共享的。
  • 当本页操作(新增、修改、删除)了localStorage的时候,本页面不会触发storage事件,但是别的页面会触发storage事件。
  • 大小:据说是5M(跟浏览器厂商有关系)
  • 在非IE下的浏览中可以本地打开。IE浏览器要在服务器中打开。
  • localStorage本质上是对字符串的读取,如果存储内容多的话会消耗内存空间,会导致页面变卡
  • localStorage受同源策略的限制

3、sessionStorage

用于临时保存同一窗口(或标签页)的数据,在关闭浏览器或该标签页之后就会删除这些数据。

4、JavaScript操作 localStorage 和 sessionStorage

不管是 localStorage,还是 sessionStorage,可使用的API都相同,常用的有如下几个(下面以localStorage为例):

  • 保存数据:localStorage.setItem(key,value);    或者:localStorage.keyName = value;
  • 读取数据:localStorage.getItem(key);
  • 删除单个数据:localStorage.removeItem(key);
  • 删除所有数据:localStorage.clear();
  • 得到某个索引的key:localStorage.key(index);

当我们想在 localStorage 和 sessionStorage 中存储对象时,可以先用 JSON.stringify(obj) 方法将对象转换为字符串,然后进行存储。要想将值作为对象输出可以用  JSON.parse(str) 方法将字符串转换为对象。

5、cookie、localStorage 、 sessionStorage 的区别和共同点

共同点:

  • 都是保存在本地浏览器端。

区别:

  • cookie数据始终在同源的http请求中携带(即使不需要),即cookie在浏览器和服务器间来回传递;cookie数据还有路径(path)的概念,可以限制cookie只属于某个路径下。而sessionStorage和localStorage不会自动把数据发给服务器,仅在本地保存。

  • 存储大小限制不同:cookie数据不能超过4k,同时因为每次http请求都会携带cookie,所以cookie只适合保存很小的数据,如会话标识。sessionStorage和localStorage 虽然也有存储大小的限制,但比cookie大得多,可以达到5M或更大。

  • 数据有效期不同:sessionStorage仅在当前标签页关闭前有效,当该标签页关闭后数据也会被删除;localStorage:持久化的本地存储,保存的数据没有过期时间,直到手动去除;cookie只在设置的cookie过期时间之前一直有效,即使窗口或浏览器关闭。

  • 作用域不同:sessionStorage 仅在当前标签页有效,即使是在同一浏览器中新建一标签页打开同一网站也不会共享;localStorage 在同一浏览器中的同一网站上都是共享的;cookie 可以设置域名及路径,实现同一域名或者目录共享。三者都是在不同浏览器下保存的位置可能不一样,都不能跨浏览器共享。

前端开发本地存储之localStorage和sessionStorage的更多相关文章

  1. [web 前端] web本地存储(localStorage、sessionStorage)

    cp from : https://blog.csdn.net/mjzhang1993/article/details/70820868 web 本地存储 (localStorage.sessionS ...

  2. (转)HTML5开发学习(2):本地存储之localStorage 、sessionStorage、globalStorage

    原文:http://www.cnblogs.com/xumingxiang/archive/2012/03/25/2416386.html HTML5开发学习(2):本地存储之localStorage ...

  3. web 本地存储 (localStorage、sessionStorage)

    web 本地存储 (localStorage.sessionStorage,cookie) localStorage(长期储存):即使关闭浏览器数据也不会删除,除非使用localStorage.cle ...

  4. web本地存储(localStorage、sessionStorage)

    web 本地存储 (localStorage.sessionStorage) 说明 对浏览器来说,使用 Web Storage 存储键值对比存储 Cookie 方式更直观,而且容量更大,它包含两种:l ...

  5. HTML5 学习总结(三)——本地存储(localStorage、sessionStorage、WebSqlDataBase、IndexedDB)

    HTML5问世以后,前端加入了一个重要的功能,便是本地存储,本地存储可分为4类: Local Storage:总的存储量有所限制,并不能提供真正的检索API,数据的生命期比窗口或浏览器的生命期长,数据 ...

  6. Html5 web 本地存储 (localStorage、sessionStorage)

    HTML5 提供了两种在客户端存储数据的新方法localStorage,sessionStorage sessionStorage(临时存储) :为每一个数据源维持一个存储区域,在浏览器打开期间存在, ...

  7. HTML5本地存储之localStorage、sessionStorage

    1.概述 localStorage和sessionStorage统称为Web Storage,它使得网页可以在浏览器端储存数据. sessionStorage保存的数据用于浏览器的一次会话,当会话结束 ...

  8. 前端开发本地存储之cookie

    1.cookie cookie是纯文本,没有可执行代码,是指某些网站为了辨别用户身份.进行 session 跟踪而储存在用户本地终端(浏览器)上的数据(通常经过加密).当用户访问了某个网站的时候,我们 ...

  9. h5本地缓存(localStorage,sessionStorage)

    H5本地存储数据 localStorage,sessionStorage的区别: 相同点:  缓存数据比cookie的范围大; localStorage:关闭浏览器数据不会消失,除非手动删除数据 se ...

随机推荐

  1. TCP概述

    1. TCP提供的服务 我们知道TCP是一个面向连接.提供可靠数据数据传输服务的传输层协议.面向连接意味着发送端和接收端在交换数据前需要建立一个连接,和我们平常打电话一样,在通话前,需要拨号建立连接. ...

  2. maven 依赖调解

    项目A有两条依赖关系  A->B->C->X(1.0),A->D->X(2.0) ,X是A的传递性依赖,但是两条路径上有两个版本的依赖,会选择哪个呢? maven 依赖调 ...

  3. StringOfChar 将一个字符重复多次 形成一个 字符串

    StringOfChar Returns a string with a specified number of repeating characters. In Delphi code, Strin ...

  4. Vagrant 入门 - 清理(teardown)

    原文地址 我们现在有一个功能齐全的虚拟机,可以用于基本 Web 开发.但如果现在需要更换设备,或者在另一个项目上工作,如何清理我们的开发环境? 借助 Vagrant,可以暂停(suspend),停止( ...

  5. 关于 推广QQ

    有一个项目 需要在用户提交表单之后,关闭页面,微信公众号发送一个模板消息,链接地址为qq推广的链接. 早上在试 先是在电脑端测试都是正常的. 然后开始上传到服务器端测试,发送模板消息之前的动作,都没有 ...

  6. Go错误处理机制及自定义错误

    错误处理机制: 先看一段代码:看看输出什么? package mainimport "fmt" func test() { num1 := 10 num2 := 0 res := ...

  7. "源文件名长度大于文件系统支持的长度无法删除"的解决方案

    import java.io.File; import java.io.IOException; import org.apache.commons.io.FileUtils; /** * @auth ...

  8. How to exploit the x32 recvmmsg() kernel vulnerability CVE 2014-0038

    http://blog.includesecurity.com/2014/03/exploit-CVE-2014-0038-x32-recvmmsg-kernel-vulnerablity.html ...

  9. 用Fusion Log诊断同一版本冲突问题解决

    处理方法,修改注册表 Add the following values to HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\Fusion Add: DWORD Force ...

  10. Panabit镜像功能配合wireshark抓包的方法

    Panabit镜像功能配合wireshark抓包的方法 Panabit的协议识别都是基于数据包的特征,因此捕获数据包样本是我们进行识别第一步要做的事情.下面就和大家说一下如何捕获网络应用的数据包. 到 ...