第180天:HTML5——本地存储

本地存储

客户端存储数据的方法

  • cookie 方法
  • localStorage方法
  • sessionStorage方法

一、localStorage

1、存储特点:

localStorage方法存储的数据没有时间限制。第二天、第二周甚至是第二年之后,数据依然可用。

不能跨浏览器读取数据

2、 API:

保存数据:localStorage.setItem(key,value);

          localStorage.key = value;

读取数据:localStorage.getItem(key);

          localStorage.key

删除单个数据:localStorage.removeItem(key);

删除所有数据:localStorage.clear();

二、sessionStorage

1、存储特点:

sessionStorage的方法针对一个session进行数据存储。当用户关闭浏览器窗口后,数据会被删除。

2、API:

保存数据:sessionStorage.setItem(key,value);

          sessionStorage.key = value;

读取数据:sessionStorage.getItem(key);

           sessionStorage.key

删除单个数据:sessionStorage.removeItem(key);

删除所有数据:sessionStorage.clear();

三、sessionStorage、localStorage 、cookie的区别

共同点:都是保存在浏览器端,且同源的。

区别:

1. 与服务器的数据交换方式不同。 cookie数据始终在同源的http请求中携带(即使不需要),即cookie在浏览器和服务器间来回传递。而sessionStorage和localStorage不会自动把数据发给服务器,仅在本地保存。

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

3. 数据有效期不同,sessionStorage:仅在当前浏览器窗口关闭前有效,自然也就不可能持久保持;localStorage:始终有效,窗口或浏览器关闭也一直保存,因此用作持久数据;cookie只在设置的cookie过期时间之前一直有效,即使窗口或浏览器关闭。

4. Cookie可以设置有效期,路径(path),域(domain)

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏vue学习

32、localStorage本地储存

其实这种实现方式很不好,这章的主要意义还是在于localStorage这个知识点的运用,下章我们学着使用vuex来进行这个地址状态的管理。

1206
来自专栏娱乐心理测试

vue中 localStorage的使用方法(详解)

vue中实现本地储存的方法:localStorage,在HTML5中,新加入了一个localStorage特性,这个特性主要是用来作为本地存储来使用的,解决了c...

4092
来自专栏杨龙飞前端

localstorage在safri下的坑

2015
来自专栏互联网软件技术

本地存储之sessionStorage

  复制链接地址打开网页不会复制seessionStorage内的数据

1874
来自专栏淡定的博客

html5之客户端存储

所谓的WebStorage指的是客户端存储,在这里指的是浏览器端存储,比如在网站上自动登陆这些功能,其实就是把一些少量的数据存储在浏览器等客户端中,这样可以减少...

2311
来自专栏马涛涛的专栏

LocalStorage、SessionStorage

window.sessionStorage和window.localStorage接口用于脚本在浏览器保存数据。

1084
来自专栏Golang语言社区

【Go 语言社区】 HTML5 前端--数据保存实例

保存数据--->到本地s.html: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//E...

3674
来自专栏Golang语言社区

HTML5之客户端存储数据

在客户端存储数据 HTML5 提供了两种在客户端存储数据的新方法:localStorage - 没有时间限制的数据存储;sessionStorage - 针对一...

3184
来自专栏互联网软件技术

本地存储之localStorage

  存储上限限制:不同的浏览器存储的上限也不一样,但大多数浏览器把上限限制在5MB以下。

1593
来自专栏IMWeb前端团队

JavaScript强化教程——sessionStorage和localStorage

本文作者:IMWeb 王军 原文出处:IMWeb社区 未经同意,禁止转载 本文为 H5EDU 机构官方 HTML5培训 教程,主要介绍:JavaScr...

2608

扫码关注云+社区

领取腾讯云代金券