首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

Web存储Web Storage)

Web 存储允许我们在浏览器里保存简单的 key/value 数据。...与 Cookie 相比,Web 存储方式更直观、存储空间更大(一般不超过 5MB); 实现 Web 存储的浏览器,在 window 对象上包含两个属性: localStorage sessionStorage...1. localStorage localStorage 存储数据是永久性的,除非通过 JavaScript 删除或者用户清除浏览器缓存,否则数据将一直保留在用户的电脑上,永不过期; localStorage...不仅如此 Web 存储还有个好玩的特性 存储事件 无论什么时候存储在 localStorage 或 sessionStorage 的数据发生变化,浏览器都会在【其他】对该数据可见的窗口对象上触发存储事件...2. sessionStorage sessionStorage 的工作方式和 localStorage 很接近,不同之处在于储存数据的有效期与作用域; 不是永久性存储,会在浏览器(或选项卡)被关闭时销毁

1.4K40
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    Web存储方式

    Web的几种存储方式介绍 web存储方式有哪些?...如下图,常见的浏览器端存储技术有(Local Storage、Session Storage、IndexedDB、Web SQL还有Cookies Local Storage与Session Storage...Web SQL 未来会被取代,主要有以下几个原因: W3C舍弃 Web SQL database草案,而且是在2010年年底,规范不支持了,浏览器厂商已经支持的就支持了,没有支持的也不打算支持了,比如IE...因为 Web SQL database 本质上是一个关系型数据库,后端可能熟悉,但是前端就有很多不熟悉了,虽然SQL的简单操作不难,但是也得需要学习。...虽然 Web Storage 对于存储较少量的数据很有用,但对于存储更大量的结构化数据来说,这种方法不太有用。IndexedDB提供了一个解决方案。

    24310

    浅析Web数据存储-Cookie、UserData、SessionStorage、WebSqlDatabase

    但是在一些场景下可能需要存储超过4K或者更多的数据,但是这些数据不用在每次请求的时候被带回到服务器,只要能在客户的浏览器上保存住,并且可以方便的被Javascript读写就可以了,这种需求尤为在中大型RIA...的应用场景下更加的迫切,部分数据放在客户浏览器,节约带宽,提高浏览速度。...在 http://www.itwen.com/04web/11skill/skill20060918/60588.html 中介绍说userData存储在X:\Documents and Settings...sessionStorage HTML5 标准对 sessionStorage的介绍: http://www.whatwg.org/specs/web-apps/current-work/ 其中对...其中的 SetInsurance link 会操作javascript 在IE下用userData写数据, 在FF下用sessionStore写数据

    89990

    HTML 5 Web 存储

    大家好,又见面了,我是全栈君 HTML5 提供了两种在客户端存储数据的新方法: localStorage – 没有时间限制的数据存储 sessionStorage – 针对一个 session 的数据存储...html5 web storage的浏览器支持判断 要判断浏览器是否支持localStorage可以使用下面的代码: if(window.localStorage){ alert(“浏览支持localStorage...(“key”, “value”); localStorage.setItem(“site”, “xiao”); getItem获取value 用途:获取指定key本地存储的值 用法:.getItem...用途:清除所有的key/value 用法:.clear() 代码示例:sessionStorage.clear(); localStorage.clear(); 其他操作方法:点操作和[] web...Storage不但可以用自身的setItem,getItem等方便存取,也可以像普通对象一样用点(.)操作符,及[]的方式进行数据存储,像如下的代码: var storage = window.localStorage

    46110

    简易数据分析 18 | Web Scraper 高级用法——使用 CouchDB 存储数据

    利用 web scraper 抓取数据的时候,大家一定会遇到一个问题:数据是乱序的。在之前的教程里,我建议大家利用 Excel 等工具对数据二次加工排序,但还是存在部分数据无法排序的情况。...其实解决数据乱序的方法也有,那就是换一个数据库。 web scraper 作为一个浏览器插件,数据默认保存在浏览器的 localStorage 数据库里。...其实 web scraper 还支持外设数据库——CouchDB。只要切换成这个数据库,就可以在抓取过程中保证数据正序了。...web scraper 的操作和以前都是一样的,预览数据时我们就会发现,和 localStorage 比起来,数据都是正序的: ? 我们也可以在 CouchDB 的操作页面预览数据。...5.导出数据 导出数据也是老样子,在 web scraper 插件面板里点击「Export data as CSV」就可以导出。

    1.5K40

    web本地存储localStorage和sessionStorage

    的大小只能是4KB且会跟在url的头中传输,locatlstorage的优势在于以下几点: 1、localStorage拓展了cookie的4K限制 2、localStorage会可以将第一次请求的数据直接存储到本地...(IE 8和9存储数据仅基于同一主机名,忽略协议(HTTP和HTTPS)和端口号的要求) 2) 单标签页限制。...sessionStorage操作限制在单个标签页中,在此标签页进行同源页面访问都可以共享sessionStorage数据。 3) 只在本地存储。...seesionStorage的数据不会跟随HTTP请求一起发送到服务器,只会在本地生效,并在关闭标签页后清除数据。(若使用Chrome的恢复标签页功能,seesionStorage的数据也会恢复)。...可访问 http://dev-test.nemikor.com/web-storage/support-test/ 测试浏览器的存储上限。

    1.8K20

    HTML5 Web 存储 优于 Cookie 的本地存储方式

    Web 开发中经常会遇到网站需要做一些例如用户备忘录、文章修改自动保存等需求 这些功能不需要长期保存,也不需要入数据库,所以有人可能会考虑使用 Cookie 去进行存储,但是 Cookie 中每条的存储空间为...4k,存储太多的数据时可能会出现存储空间不足的问题 于是就有了 Web 存储来解决这个问题,Web 存储更加的安全与快速。...它也可以存储大量的数据,而不影响网站的性能 HTML5 Web 存储目前有两种存储对象:localStorage 和 sessionStorage 客户端存储数据的两个对象为: localStorage...,第二天、第二周或下一年之后,数据依然可用,sessionStorage 对象当用户关闭浏览器窗口后,数据会被删除 HTML5 Web 存储的局限性 浏览器的存储大小不统一,并且在 IE8 以上的浏览器版本才支持...HTML5 Web 存储 HTML5 Web 存储本质上是对字符串的读取,如果存储内容多的话会消耗内存空间,会导致页面变卡 HTML5 Web 存储的使用 不管是 localStorage,还是 sessionStorage

    90810

    存储数据

    数据缓存 通过《网络数据采集和解析》一文,我们已经知道了如何从指定的页面中抓取数据,以及如何保存抓取的结果,但是我们没有考虑过这么一种情况,就是我们可能需要从已经抓取过的页面中提取出更多的数据,重新去下载这些页面对于规模不大的网站倒是问题也不大...使用NoSQL Redis简介 Redis是REmote DIctionary Server的缩写,它是一个用ANSI C编写的高性能的key-value存储系统,与其他的key-value存储系统相比...Redis支持数据的持久化(RDB和AOF两种方式),可以将内存中的数据保存在磁盘中,重启的时候可以再次加载进行使用。...Redis不仅仅支持简单的key-value类型的数据,同时还提供hash、list、set,zset、hyperloglog、geo等数据类型。...配置底层有多少个数据库。 配置Redis的持久化机制 - RDB。 配置Redis的持久化机制 - AOF。 配置访问Redis服务器的验证口令。

    4.6K30

    android 数据存储---- SharedPreferences实现数据存储

    SharedPreferences作为android的存储方式有以下特点: 1.只能存放key-value模式的键值。 2.本质就是就是以xml文件在应用程序所在包中存放数据。...用户不需要去  xml文件的生成和解析 4.由于 SharedPreferences 只能存放key-value  简单的数据结构,通过用来做软件配置参数,用来配置用户对软件的自定义或设置参数。...如果要存在复杂的数据,可以使用文件,如果还需要方便的增删改查 的话,就只能用Sqlite数据库来完成 下面是该使用的代码: 所用的字符串 <?...this.getApplicationContext()); pref.save(name, ID, phone); Toast.makeText(this.getApplicationContext(), "写入数据成功...用户只需要创建一实体,然后想里面添加数据和取出数据,即可 结果如下:

    5K50

    数据分类及存储特性——NoSQL数据存储

    ◆ NoSQL数据存储 传统的架构方法是在服务之间共享一个数据库,而微服务却与之相反,每个微服务都拥有独立、自主、专门的数据存储。...选择理想的数据存储的第一步是确定微服务数据的性质,可以根据数据的特点将数据大致做如下划分。 全局共享数据:缓存服务器是存储短暂数据很好的例子。...K-V存储:解决关系数据库无法存储数据结构的问题,主要适合对全局数据进行快速查找的低延时、高性能场景,以Redis为代表。...◆ K-V存储 K-V存储指按照键值(Key-Value)进行的数据存储,其中Key是数据的标识,和关系数据库中的主键含义一样;Value是具体的数据。...◆ 列式数据库 顾名思义,列式数据库就是按照列来存储数据数据库,与之对应的传统关系数据库被称为“行式数据库”,关系数据库就是按照行来存储数据的。

    5.5K10

    HTML5(三)——Web 本地存储

    WebStorage两个主要目标: (1)提供一种在cookie之外存储会话数据的路径。 (2)提供一种存储大量可以跨会话存在的数据的机制。...web存储更加安全与快速,这些数据还不会保存到服务器,还可以存储大量数据而不影响网站性能。 web 存储类型 localStorage - 用于长久保存数据,没有有效期,直到手动清除。...web存储数据应用 应用1:取出本地存储的所有数据,以localStorage为例。 localStorage和sessionStorage是两个对象,类似json。...console.log(`${key}--${localStorage[key]}`) } 运行程序之后,结果如图: 我们发现遍历的时候把localStorage的属性和方法全部打印出来了,而我们需要的只是我们存储的三个数据...如果保存复杂json数据时,可以转成字符串保存,取出时通过JSON.parse()转成json格式。 安全性方面,web 存储不会发送到服务器端,不用担心被截获,所以相对cookie安全些。

    1.1K10

    HTML5(三)——Web 本地存储

    WebStorage两个主要目标: (1)提供一种在cookie之外存储会话数据的路径。 (2)提供一种存储大量可以跨会话存在的数据的机制。...web存储更加安全与快速,这些数据还不会保存到服务器,还可以存储大量数据而不影响网站性能。 web 存储类型 localStorage - 用于长久保存数据,没有有效期,直到手动清除。...web存储数据应用 应用1:取出本地存储的所有数据,以localStorage为例。 localStorage和sessionStorage是两个对象,类似json。...console.log(`${key}--${localStorage[key]}`) } 运行程序之后,结果如图: 我们发现遍历的时候把localStorage的属性和方法全部打印出来了,而我们需要的只是我们存储的三个数据...如果保存复杂json数据时,可以转成字符串保存,取出时通过JSON.parse()转成json格式。 安全性方面,web 存储不会发送到服务器端,不用担心被截获,所以相对cookie安全些。

    99420

    存储数据的基础存储数组

    1、数组概念 数组就是存储数据长度固定的容器,保证多个数据数据类型要一致。 软件的基本功能是处理数据,而在处理数据时,必须先进行数据持有,将数据持有之后,再对数据进行处理。...我们将程序中可以临时存储数据的部分叫做容器。 Java当中具有持有数据功能的容器中,数组是最基本的,也是运算速度最快的。...2.1、格式一 2.1.1、数组定义格式 数组存储数据类型 [] 数组名字 = new 数组存储数据类型[长度]; 2.1.2、格式说明 **数组存储数据类型:**创建的数组容器可以存储什么数据类型...数组存储数据类型: 创建的数组容器可以存储什么数据类型。 **长度:**数组的长度,表示数组容器中可以存储多少个元素。 2.1.3、注意 数组有定长特性,长度一旦指定,不可更改。...2.1.4、案例 需求:定义可以存储3个整数的数组容器 int arr[]= new int[3]; 2.2、格式二 2.2.1、数组定义格式 数据类型[] 数组名 = new 数据类型[]{元素1,元素

    4.5K20

    探索PostgreSQL数据存储存储数据

    PG磁盘数据到内存概览 任何传统传统数据库都会借助DRAM来加速数据库磁盘数据的访问。比如PG中的share_buffer,全局为PG数据库中表存储数据page提供缓冲空间。...PG中一个表一般会有三种类型的数据,一个是fsm文件表示当前数据表中可用的空闲空间,另外一个是vm文件来表示数据表中数据可见性的映射,最后一个是以oid来表示的数据文件.fsm是基于page来管理空闲空间...xlog的lsn号 PageXLogRecPtr pd_lsn; // 如果设置了page checksum这里就存储了checksun uint16 pd_checksum; // flag...,属性信息存储在TupleDescData // 包含在tuple header中的信息 typedef struct HeapTupleFields { // 插入事务ID TransactionId...HeapTupleHeaderData; struct HeapTupleHeaderData { // 每个元组的事务信息/记录的多少列信息 union { // tuple事务信息存储

    3.8K50

    Android数据存储

    数据存储 Android数据存储的几种形式 Internal Storage Store private data on the device memory....Android平台中嵌入了一个关系型数据库SQLite,和其他数据库不同的是SQLite存储数据时不区分类型,例如一个字段声明为Integer类型, 我们也可以将一个字符串存入, 一个字段声明为布尔型...除非是主键被定义为Integer,这时只能存储64位整数创建数据库的表时可以不指定数据类型,例如: CREATE TABLE person(id INTEGER PRIMARY KEY...noteBeans.add(bean); bean = null; } db.close(); return noteBeans; } } Network Store data on the web...我们在更新或安装apk时一般将其放到外部存储设备中来进行安装,但是如果一个手机没有外部存储设备该怎么办呢?总不能就不给更新或者安装了。

    2.3K70

    数据存储漫谈

    数据系统的核心就是两件事,读和写,当数据量还少的时候,读写的性能不会有明显区别,随着数据量的增大,读写变成了一个trade-off,当你拥有优秀的写性能时,读数据性能就会下降,反之亦然。...这就是最简单的一个数据存储系统。 写:这个数据系统写的性能相当优秀,因为它没有做任何操作,仅仅只是把新来的数据添加到文件的末尾,这意味着数据系统可以并发的去写数据,而不需要担心任何冲突。...数据系统A已经存储了如下数据: foo:bar foo1:bar1 为了更快的读取数据,可以在内存里维护一张hash表,把每个key值出现的位置记录下来,当需要读取数据时,直接从hash表中读取: foo...:0 foo1:8 也就是当B系统需要读取foo1时,会先去hash表找到foo1,找到对应的位移8,回到存储数据的文件直接将指针定位到8这个位置,即可获得value,而不需要遍历整个数据文件。...主流数据系统C B系统的读性能获得了极大的提升,但是hash表太占用内存,并且对范围查询不友好,调整下思路,在存储的时候,将数据进行有序排列,例如按照key值从大到小进行排序: A_key:A_value

    2.2K20
    领券