精华内容
下载资源
问答
  • WebStorage

    2019-08-24 18:32:54
    WebStorage是H5提出的新技术,由sessionStorage和localStorage组成。 什么是Cookie?和Web Storage的产生有何关联?Web Storage的两个主要目标是? 存储在用户本地终端上的数据。 指某些网站为了辨别用户身份,进行...

    WebStorage是H5提出的新技术,由sessionStorage和localStorage组成。


    什么是Cookie?和Web Storage的产生有何关联?Web Storage的两个主要目标是?

    存储在用户本地终端上的数据。
    指某些网站为了辨别用户身份,进行session跟踪而存储在用户本地终端上的数据。
    但是Cookie的容量有限,并且Cookie会跟随请求一并发送给服务器,不够快速,最重要的是,
    Cookie是有Web服务器保存在用户浏览器中上的小文本文件,它包含有关用户的信息,所以极不安全
    于是,HTML5提出了Web Storage,Web Storage的容量比Cookie大的多,更加的安全和快速,存在Web Storage
    中的数据不会发送给服务器,只用于用户请求网站数据上。
    主要目标:

    1. 提供一种在Cookie之外存储会话数据的途径;
    2. 提供一种存储大量可以跨会话存在的数据的机制。

    localStoragesessionStorage是什么?区别是什么?

    sessionStorage 用于将浏览数据存储在session中,当前选项卡关闭的话,该seesion中的数据就会被销毁。
    localStorage 用于将浏览数据客户端本地,除非用户主动删除数据,否则即使关闭浏览器,数据也不会消失。
    区别:前置只能将数据保存在当前选项卡中,而后者将数据保存在客户端本地的硬盘设备中

    展开全文
  • Web Storage

    千次阅读 2016-10-09 09:52:58
    Web Storage 分为本地存储和会话存储,不能跨域访问。 Web Storage 使在不影响网站性能的情况下存储大量数据成为可能。 注意:Web Storage 存储的是字符串,获取和存储时别忘了用 JSON.stringify() 和 JSON.parse...

    Web Storage 分为本地存储会话存储,不能跨域访问。

    Web Storage 使在不影响网站性能的情况下存储大量数据成为可能。

    注意:Web Storage 存储的是字符串,获取和存储时别忘了用 JSON.stringify() 和 JSON.parse() 对非字符串类型数据做相应的转换。

     

    一、localStorage

    本地存储(localStorage):长时间的保存在电脑本地。

    单个域名容量上限为5M。

    应用场景

    利用localStorage的较大容量和持久特性,可以利用localStorage存储一些内容稳定的资源,比如官网的logo,存储Base64格式的图片资源。

    二、sessionStorage

    会话存储(sessionStorage):只限于当前页面,当前页面关闭,数据就清除了。

    容量上限也为 5M

    应用场景

    1. 可以用它对表单信息进行维护,将表单信息存储在里面,可以保证页面即使刷新也不会让之前的表单信息丢失。
    2. 可以用它存储本次浏览记录。如果关闭页面后不需要这些记录,用sessionStorage就再合适不过了。事实上微博就采取了这样的存储方式。

    三、Storage API

    localStorage 和 sessionStorage API一样,最常用的是这几个:

    1.getItem(key);获取指定key本地存储的值

     2.setItem(key,value);将value存储到key字段

     3.removeItem(key);删除指定key本地存储的值

     4.clear();清除所有的本地存储

     5.length;读取本地存储的键值对个数

     6.key(i);读取本地存储第 i 个 key 的名称,i 从0开始

     7.storage事件:当本地存储的数据发生变化时会触发此事件,包含的属性有:

    storageArea: 表示存储类型(Session或Local)

    key:发生改变项的key

    oldValue: key的原值

    newValue: key的新值

    url*: key改变发生的URL

    * 注意: url 属性早期的规范中为uri属性。有些浏览器发布较早,没有包含这一变更。为兼容性考虑,使用url属性前,你应该先检查它是否存在,如果没

    有url属性,则应该使用uri属性。

    如果调用clear()方法,那么key、oldValue和newValue都会被设置为null。

    PS:在firefox和chrome中存储和读取都是正常的, 但是对storage事件的触发似乎有点问题, 自身页面进行setItem后没有触发window的storage事件, 但是

    同时访问A.html和B.html, 在A页面中进行 setItem能触发B页面中window的storage事件, 同样的在B页面中进行setItem能触发A页面中window的

    storage事件. 在IE9中, 页面自身的设值能触发当前页面的storage事件,同样当前页面的设值能触发同一”起源”下其他页面window的storage事件。

    var arrDisplay = [0, 1, 1, 1];
    
    //存储,IE6~7 cookie 其他浏览器HTML5本地存储
    if (window.localStorage) {
        localStorage.setItem("menuTitle", arrDisplay);	
    } else {
        Cookie.write("menuTitle", arrDisplay);	
    }
    
    var strStoreDate = window.localStorage? localStorage.getItem("menuTitle"): Cookie.read("menuTitle");	
    
    strStoreDate.split(",").forEach(function(n, i) {
        //n是当前的值,i是当前的下标。
    });

     

    var storage = window.localStorage;  
    for (var i=0; i < storage.length; i++){  
        var key = storage.key(i);  
        var value = storage.getItem(key);  
        console.log(key + "=" + value);  
    }  

    从 2017.10.17 起,W3C规定可以以添加对象属性的方式给 Storage 存值

    存储效果是一样的:

    localStorage.name = 'Jim';
    // 等效于
    localStorage.setItem('name', 'Jim')

    取值,如果有值效果是一样的,如果没值,返回值会有所不同

    localStorage.name; // Jim
    localStorage.getItem('name'); // Jim
    localStorage.age; // undefined
    localStorage.getItem('age'); // null

     

     

    展开全文
  • react-webstorage 直接使用 W3C WebStorage API 的任何实现作为 React/Flux 风格的存储。 var WebStorage = require ( 'react-webstorage' ) , dispatcher = require ( './path/to/app-dispatcher' ) ; var web...
  • web Storage

    2018-08-30 15:17:01
    HTML提供了一种新的对象...实际上我们将数据以键值对的形式保存到Storage对象里,通过Storage对象提供的方法进行数据操作。 增 Storage.setItem() 该方法接受一个键名和值作为参数,将会把键值对添加到存储...

    HTML5提供了一种新的存储机制。
    HTML5提供了一种新的对象Storage,类似于String、Number、Object。通过Storage对象提供的方法和属性来对数据进行增删改查。
    这里写图片描述
    实际上我们将数据以键值对的形式保存到Storage对象里,通过Storage对象提供的方法进行数据操作。


    Storage.setItem()
    该方法接受一个键名和值作为参数,将会把键值对添加到存储中,如果键名存在,则更新其对应的值。


    Storage.clear()
    调用该方法会清空存储中的所有键名。
    Storage.removeItem()
    该方法接受一个键名作为参数,并把该键名从存储中删除。


    Storage.setItem()
    该方法接受一个键名和值作为参数,将会把键值对添加到存储中,如果键名存在,则更新其对应的值。


    Storage.getItem()
    该方法接受一个键名作为参数,返回键名对应的
    Storage.key()
    该方法接受一个数值 n 作为参数,并返回存储中索引为n 的键名
    Storage.length
    此属性为只读属性,返回存储的数据量


    实际上我们并不需要去创建Storage实例,HTML5提供了两个Storage对象 localStorage和sessionStorage,这两个对象是Storage的实例,继承Storage的属性和方法。
    localStorage.__proto__===Storage.prototype    //true
    sessionStorage.__proto__===Storage.prototype    //true
    

    两者唯一的区别就是:
    sessionStorage数据值保存在会话期间,而localStorage会永久保存在本地(除非手动删除)。
    注意:要访问同一个localStorage对象,页面必须来自同一域名
    sessionStorage 和 localStorage 的用法基本一致,引用类型的值要转换成JSON

    展开全文
  • 网络存储本地 一个持久性插件为本地文件存储。... var webstorage = require ( 'webstorage' ) ; var local = require ( 'webstorage-local' ) ; webstorage ( local ( '/tmp' ) ) ; 执照 麻省理工学院
  • WEB Storage

    千次阅读 2013-02-18 17:47:04
    而sessionStorage在每个数据改变时会派发一个storage事件出来,这个事件包括原来的值和新的值,监听该事件可以避免上面类似的问题发生。 这个对象适合保存临时数据,因为如果浏览器一旦 正常关闭 这些数据也就被...

    目前标准的有sessionStorage和localStorage。

    sessionStorage

    在浏览器打开期间,页面会话是持续存在的,哪怕页面重新加载(reload)或页面还原(restore)。只要是同一个站点的页面,不管打开多少个窗口,它们之间都共享同一个sessionStorage。

    之所以有sessionStorage,是因为cookie在session数据存储方面做的不到位,因为当两个交易在相同页面两个不同浏览器同时进行时,很容易导致其中一个被忽略或覆盖,而且没有任何通知,而其实两个交易可能都成功了,而用户只看到了一个。而sessionStorage在每个数据改变时会派发一个storage事件出来,这个事件包括原来的值和新的值,监听该事件可以避免上面类似的问题发生。

    这个对象适合保存临时数据,因为如果浏览器一旦正常关闭这些数据也就被清除了。

    获取和存储数据也是非常简单,直接操作sessionStorage即可:

    //Save data to a the current session's store

    sessionStorage.setItem("username","John");

     

    // Access some storeddata

    alert( "username= " + sessionStorage.getItem("username"));

     

    // Remove data from the current session's store

    sessionStorage.removeItem("username");

     

     

    // Removeall data from session'sstore

    sessionStorage.clear();

    localStorage

    这个对象和sessionStorage的规则是一样的,只是它存储的数据是持久性的。同一个站点的页面共用同一个localStorage,不同站点使用不同的localStorage。

    在秘密浏览模式下,会有一个临时数据库用来存储local存储数据,当秘密浏览模式关闭,这些数据就会被清空。

    localStorage与cookie的区别在于,存储在localStorage中的数据不需要每次和请求一起传输。

     

    如何缓解用户信息被追踪的问题

    阻止第三方存储

    比如,防止iframe中那些不同域的页面不能访问localStorage的API。

    自动使数据过期

    用户代理可以让用户自己设置多久那些数据应该被清空。

    把持久化数据当成cookie

    当用户想清空cookie时,存储在localstorage中的数据并没有被删除。用户代理应该提供一种方式,即它和cookie可以同时被清空。

    建立黑白名单

    白名单中的可以无限访问localstorage,而黑名单中的站点不能访问localestorage。

    展开全文
  • Web Storage.rar

    2021-09-16 22:04:01
    Web Storage.rar
  • var webstorage = require ( 'webstorage' ) ; var storage = webstorage ( ) ; storage . setItem ( 'foo' , 'bar' ) ; storage . getItem ( 'foo' ) // => 'bar' 如果你想在本地持久化数据,你可以使用插件。 ...
  • web storage介绍 web storage和Cookie都是用来在客户端存储数据。 web storage又分为localStrage和sessionStorage Cookie的弊端 每次请求时,cookie都会存放在请求头中。 请求被拦截,cookie数据会存在安全...
  • Webstorage特性

    千次阅读 2017-10-30 23:53:24
    Webstorage
  • WebStorage-开源

    2021-05-15 07:53:00
    WebStorage是一个用PHP编写的基于Web的应用程序,用于将文件存储在Postgres数据库中,其中文件可以组织在目录中。 它类似于Unix文件系统,除了它可以通过Web浏览器访问并且没有文件访问控制。
  • h5webstorage 适用于Angular2HTML5 WebStorage API (服务) (服务) (装饰器) (功能) 用 下载库: npm install h5webstorage --save 2.将模块和提供程序导入顶级模块: import { WebStorageModule } ...
  • 主要为大家详细介绍了HTML5本地存储之Web Storage的相关资料,Web Storage如何用JSON存储多个数据,感兴趣的小伙伴们可以参考一下
  • Angular的Webstorage服务 该软件包为提供了服务包装器。 每当您的应用程序需要使用localStorage或sessionStorage ,可以直接使用此包提供的包装版本,而不是直接使用它们。 这样做具有以下优点: 从一种存储类型...
  • Web Storage API的介绍和使用

    万次阅读 热门讨论 2020-10-06 09:09:58
    Web Storage为浏览器提供了方便的key value存储,是一种比cookie更加方便简洁的存储方式。也是诸多客户端存储方式中非常常见的一种。 一起来看看吧。
  • Web Storage API

    2017-05-11 14:34:11
    web storage内容 web storage提供在浏览器端通过key/value的方式存储数据。包括以下两部分:  session storage(会话级别的存储,会话结束后失效) local storage(持久性存储,用户主动删除或js操作清空...
  • webStorage作为简易数据库来使用
  • WebStorage数据储存

    2020-04-27 21:01:34
    WebStorage储存 什么是WebStorage HTML5 的 Web Storage 可以让 Web 页面在客户端浏览器中以键值对的形式在本地存储数据。 这些数据可以是临时的(浏览器一关就自动删除),或者是长期存在的(无论多少天之后打开...
  • 主要给大家介绍了关于JavaScript学习教程之cookie与webstorage的相关资料,文中通过示例代码介绍的非常详细,对大家学习或者使用JavaScript具有一定的参考学习价值,需要的朋友们下面来一起学习学习吧
  • 主要介绍了详解H5本地储存Web Storage的相关资料,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • HTML5 webStorage

    2016-09-12 09:29:31
    HTML5 webStorage cookie的问题: 1.数据大小有限 ...3.网络负担:cookie会被附加在每个...webStorage提供两种类型的API:localStorage和sessionStorage localStorage在本地永久性存储数据 sessionStorage存储的数
  • 认识H5中Web Storage

    千次阅读 2017-04-05 21:31:13
    认识h5中Web Storage Cookie的缺点 Web Storage对象 sessionStorage对象
  • HTML5 Web Storage

    2015-03-08 00:32:11
    HTML5 Web Storage Web Storage是HTML5 API提供一个新的重要的特性; 最新的Web Storage草案中提到,在web客户端可用html5 API,以Key-Value形式来进行数据持久存储; 目前主要的浏览器已经支持该功能; ...
  • Web Storage是HTML5引入的一个非常重要的功能,可以在客户端本地存储数据,类似HTML4的cookie,但可实现功能要比cookie强大的多,cookie大小被限制在4KB,Web Storage官方建议为每个网站5MB,感兴趣的朋友可以了解下
  • web存储(Web Storage

    2019-08-05 22:13:55
      Web Storage的目的是克服由cookie带来的一些限制,当数据需要被严格控制在客户端上时,无须持续地将数据发回服务器。Web Storage的两个主要目标是:提供一种在cookie之外存储会话数据的途径以及提供一种存储大量...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 119,819
精华内容 47,927
关键字:

webstorage