美文网首页
Web Storage是什么?Web Storage详解

Web Storage是什么?Web Storage详解

作者: 鹤子青云上 | 来源:发表于2023-09-17 17:58 被阅读0次

Web Storag是HTML5引入的一个非常重要的功能,可以将数据存储在本地,如保存用户的偏好设置、复选框的选中状态、文本框默认填写的值等。用户在浏览器中刷新网页时,网页通过Web Storage就可以知道用户之前所做的一些修改,而不需要将用户修改的内容存储在服务器端。

Web Storage类似于Cookie,但相比Cookie可以减少网络流量,因为Web Storage存储的数据不会发送给服务器,而Cookie存储的数据会由浏览器通过HTTP请求自动发送给服务器。将数据存储在WebStorage可以减少数据在浏览器和服务器间不必要地来回传递。

Web Storage中包含两个关键的对象,分别是localStorage对象和sessionStorage对象,它们都是Web Storage的实例,所以都能使用Web Storage接口提供的方法和属性。localStorage对象用于本地存储,sessionStorage对象用于区域存储。

Web Storage具有以下5个特点:

(1)数据的设置和读取比较方便。

(2)容量较大,可以存储大约5MB数据。

(3)只能存储字符串,如果要存储JSON对象,则可以使用JSON.stringify()和JSON.parseO方法分别进行序列化和反序列化。

(4)本地数据可以即时获得。借助浏览器的缓存,整个页面和数据都可以保存在本地,从本地读数据比通过网络从服务器获得数据快得多,可以立即显示网页中缓存的内容。

(5)数据可以临时存储。很多时候数据只需要在用户浏览单个页面期间使用,关闭页面后数据就可以丢弃,这种情况使用sessionStorage非常方便。
目前,市面上主流的Web浏览器都在一定程度上支持HTML5的Web Storage,且iOS和Android两大平台对Web Storage都具有很好的支持。目前市面上的主流手机和平板计算机都依赖这两个平台,所以在实际开发中,基本不需要担心移动设备的Web浏览器对Web Storage的支持情况。

相关文章

  • HTML Web Storage

    什么是HTML Web Storage Web Storage是HTML5的新特性,通过Web Storage,用...

  • H5 : web storage api

    web storage api:web-storage是一些关于web存储的api集. H5的web storag...

  • 自学:前端本地化存储(HTML5)

    常用的原生js设置本地化存储 Web storage Local Storage Local Storage ...

  • 储存

    如何使用Web storage

  • 2018-09-08笔面

    cookie弊端 优点 web Storage storage和cookie的区别 sessionStorage和...

  • Web Storage

    Web Storage API 为浏览器提供了一种比cookies更加直观的方式来存储键值对的机制。session...

  • Web Storage

    Web Storage实际上由两部分组成:sessionStorage与localStorage。 session...

  • Web Storage

    Web Storage:localStorage sessionStroage sessionStorage浏览器...

  • Web Storage

    Web Storage包括哪几种方式,区别是什么,没出现之前怎么做的 CookieWeb Storage4KB左右...

  • Web Storage

    关于Web Storage的那些事 Web Storage是一种将少量数据存储在客户端磁盘的技术 在支持WebSt...

网友评论

      本文标题:Web Storage是什么?Web Storage详解

      本文链接:https://www.haomeiwen.com/subject/foewvdtx.html