javaScript有三种数据存储方式,分别是:

sessionStorage

localStorage

cookier

相同点:都保存在浏览器端,同源的

不同点:

①传递方式不同

cookie数据始终在同源的http请求中携带(即使不需要),即cookie在浏览器和服务器间来回传递。

sessionStorage和localStorage不会自动把数据发给服务器,仅在本地保存。

②数据大小不同

cookie数据还有路径(path)的概念,可以限制cookie只属于某个路径下。
存储大小限制也不同,cookie数据不能超过4k,同时因为每次http请求都会携带cookie,所以cookie只适合保存很小的数据,如会话标识。

sessionStorage和localStorage 虽然也有存储大小的限制,但比cookie大得多,可以达到5M或更大。

③数据有效期不同

sessionStorage:仅在当前浏览器窗口关闭前有效,自然也就不可能持久保持;

localStorage:始终有效,窗口或浏览器关闭也一直保存,因此用作持久数据;

cookie只在设置的cookie过期时间之前一直有效,即使窗口或浏览器关闭。

④作用域不同

sessionStorage不在不同的浏览器窗口中共享,即使是同一个页面;

localStorage 在所有同源窗口中都是共享的;

cookie也是在所有同源窗口中都是共享的。

Web Storage 支持事件通知机制,可以将数据更新的通知发送给监听者。
Web Storage 的 api 接口使用更方便。

js三种存储方式区别的更多相关文章

  1. js 三种存储方式的区别

    javaScript有三种数据存储方式,分别是: sessionStorage localStorage cookie 相同点:都保存在浏览器端,同源的 不同点: ①传递方式不同 cookie数据始终 ...

  2. 三种存储方式DAS、NAS、SAN

    ------------恢复内容开始------------ 一.DAS.NAS.SAN在存储领域的位置 随着主机.磁盘.网络等技术的发展,数据存储的方式和架构也在一直不停改变,本文主要介绍目前主流的 ...

  3. js介绍,js三种引入方式,js选择器,js四种调试方式,js操作页面文档DOM(修改文本,修改css样式,修改属性)

    js介绍 js运行编写在浏览器上的脚本语言(外挂,具有逻辑性) 脚本语言:运行在浏览器上的独立的代码块(具有逻辑性) 操作BOM 浏览器对象盒子 操作DOM 文本对象 js三种引入方式 (1)行间式: ...

  4. 常见三种存储方式DAS、NAS、SAN的架构及比较

    转至:https://blog.csdn.net/shipeng1022/article/details/72862367 随着主机.磁盘.网络等技术的发展,数据存储的方式和架构也在一直不停改变,本文 ...

  5. 【转】vue.js三种安装方式

    Vue.js(读音 /vjuː/, 类似于 view)是一个构建数据驱动的 web 界面的渐进式框架.Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件.它不仅易于上手 ...

  6. vue.js三种安装方式

    Vue.js(读音 /vjuː/, 类似于 view)是一个构建数据驱动的 web 界面的渐进式框架.Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件.它不仅易于上手 ...

  7. HTML5的三种存储方式以及区别

    首先将存储方式前要先知道为什么要使用他:一是利用本地数据,介绍网络请求:二是弱网环境下,高延迟,低带宽,要把数据本地化: 1.本地存储localStorage和sessionStorage 介绍: 存 ...

  8. DAS、SAN和NAS三种存储方式

    DAS存储 DAS存储在我们生活中是非常常见的,尤其是在中小企业应用中,DAS是最主要的应用模式,存储系统被直连到应用的服务器中,在中小企业中,许多的数据应用是必须安装在直连的DAS存储器上. DAS ...

  9. Hive metastore三种配置方式

    http://blog.csdn.net/reesun/article/details/8556078 Hive的meta数据支持以下三种存储方式,其中两种属于本地存储,一种为远端存储.远端存储比较适 ...

随机推荐

  1. 配置tomcat远程debug

    Linux系统中在编辑catalina.sh文件,修改JAVA_OPTS的变量值为如下即可. JAVA_OPTS="$JAVA_OPTS $JSSE_OPTS -Xdebug -Xrunjd ...

  2. UIView 动画 依赖与 CALayer的证据

    - (nullable id<CAAction>)actionForLayer:(CALayer *)layer forKey:(NSString *)event Layer: -(voi ...

  3. DVR_RDK编译报错

    报错信息: abnormal termination of /opt/dm8168/dvr_rdk/../ti_tools/cgt_dsp/cgt6x_7_3_5//bin/cmp6x make[2] ...

  4. .net打印

    <input type="button" onclick="javascript:printit()"></input>//打印整个ht ...

  5. mybatis会对多参数方法进行特殊处理

    例如:查询id=1,name=tom的一条数据 查询接口: User getUserByIdAndName(Integer id,String name); // <?xml version=& ...

  6. 我的前端工具集(六)Ajax封装token

    我的前端工具集(六)Ajax封装token   liuyuhang原创,未经允许禁止转载 在单点登陆中,或登陆验证后,不应该每次都验证用户名和密码, 也不应该将用户名密码存入cookie中(虽然很多都 ...

  7. HTML5开篇定义(更新中)

    以下介绍的两种属性是为后面的属性支持左铺垫,大概一看就OK了. 通用属性 id 用于为HTML元素指定唯一标识 style 用于为HTML元素指定CSS指定样式 class 用于匹配CSS样式的cla ...

  8. js实现99乘法表的编写(双层for循环与递归方法)

    双层for循环实现方法: function nine (num) { ; i <= num; i++){ var str = ''; ; k <= num; k++){ if(i > ...

  9. angular-sanitize 插件的使用,获取带html标签的内容

    1,安装 angular-sanitize bower install angular-sanitize --save 引入到 html <script src="/bower_com ...

  10. collections.namedtuple()命名序列元素

    ## collections.namedtuple()命名序列元素 from collections import namedtuple Student = namedtuple("Stud ...