原文链接:https://blog.csdn.net/qq_37936542/article/details/78866755

需求:微信开发时,在某个页面授权获取用户的openid,但是每次刷新页面就会重新请求,增加页面加载速度,影响用户体验。

--HTML5 提供了两种在客户端存储数据的新方法:

localStorage - 没有时间限制的数据存储
sessionStorage - 针对一个 session 的数据存储
之前,这些都是由 cookie 完成的。但是 cookie 不适合大量数据的存储,因为它们由每个对服务器的请求来传递,这使得 cookie 速度很慢而且效率也不高。

在 HTML5 中,数据不是由每个服务器请求传递的,而是只有在请求时使用数据。它使在不影响网站性能的情况下存储大量数据成为可能。

对于不同的网站,数据存储于不同的区域,并且一个网站只能访问其自身的数据。

HTML5 使用 JavaScript 来存储和访问数据。

HTML5 的本地存储 API 中的 localStorage 与 sessionStorage 在使用方法上是相同的,区别在于生命周期(localStorage是永久存储,只要不删除,会一直存在;sessionStorage是会话级存储,当前会话结束,缓存自动清空)

sessionStorage 周期也可理解成:sessionStorage存储的数据生命周期只保存在存储它的当前窗口或由当前窗口新建的新窗口,直到相关联的标签页关闭

一、localStorage API 基本使用方法

localStorage API 使用方法简单易懂,如下为常见的 API 操作及示例:

1.设置数据:localStorage.setItem(key,value); 示例:

localStorage.setItem(key,value);

2.获取数据:localStorage.getItem(key) 获取数据  示例: 

localStorage.getItem(key);

3.删除数据:localStorage.removeItem(key) 示例:

localStorage.removeItem(key);

4.清空全部数据:localStorage.clear()

5.获取本地存储数据数量:localStorage.length

6.获取第 N 个数据的 key 键值:localStorage.key(N)

7.localStorage.valueOf( )//获取全部值

二、sessionStorage API 与 localStorage 一致,参考localStorage API

文末福利:

福利一:前端,Java,产品经理,微信小程序,Python等10G资源合集大放送:https://www.jianshu.com/p/e8197d4d9880

福利二:微信小程序入门与实战全套详细视频教程

【领取方法】

关注 【编程微刊】微信公众号:

回复【小程序demo】一键领取130个微信小程序源码demo资源。

回复【领取资源】一键领取前端,Java,产品经理,微信小程序,Python等资源合集10G资源大放送。



90后前端妹子,爱编程,爱运营,爱折腾。
坚持总结工作中遇到的技术问题,坚持记录工作中所所思所见,欢迎大家一起探讨交流。

html页面保存数的两种方式的更多相关文章

  1. js实现页面跳转的两种方式

      CreateTime--2017年8月24日08:13:52Author:Marydon js实现页面跳转的两种方式 方式一: window.location.href = url 说明:我们常用 ...

  2. web项目中实现页面跳转的两种方式

    <a href="javascript:"></a>跳转在网页本身,URL不改变 <a href="#"></a> ...

  3. sklearn保存模型的两种方式

    sklearn 中模型保存的两种方法   一. sklearn中提供了高效的模型持久化模块joblib,将模型保存至硬盘. from sklearn.externals import joblib # ...

  4. 关于H5页面中生成图片的两种方式!

    前言: 我们在做项目过程中,经常会遇到自定义生成一张图片并可以长按保存.长按保存图片在微信等浏览器中默认就有,那么对于生成图片的有哪些方式呢? 方法一: 利用canvas绘制图形,然后生成图片 代码如 ...

  5. CefSharp获取页面Html代码的两种方式

    CefSharp在NuGet的简介是“The CefSharp Chromium-based browser component”,机翻的意思就是“基于Cefsharp Chromium的浏览器组件” ...

  6. Servlet页面跳转的两种方式

    一.页面跳转 1. 请求转发: (1) 使用requestDispatcher对象: 转发格式:request.getRequestDispatcher("path").forwa ...

  7. 解决使用angularjs时页面因为{{ }}闪烁的两种方式ng-bind,ng-cloak

    1.HTML加载含有{{ }}语法的元素后并不会立刻渲染它们,导致未渲染内容闪烁(Flash of Unrendered Content,FOUC).我可以用ng-bind将内容同元素绑定在一起避免F ...

  8. vue 页面跳转的两种方式

    1,标签跳转     <router-link to='two'><button>点我到第二个页面</button></router-link> 2,点 ...

  9. vue页面是否缓存的两种方式

    第一种 <keep-alive> <router-view v-if="$route.meta.keepAlive"></router-view> ...

随机推荐

  1. 基于Linux系统WINE虚拟机技术的研究

    650) this.width=650;" onclick="window.open("http://blog.51cto.com/viewpic.php?refimg= ...

  2. teamviewer连接不上的原因及解决方法有哪些

    teamviewer连接不上的原因及解决方法有哪些 一.总结 一句话总结:这里说的就是版本问题,高版本可以连接低版本,低版本无法连接高版本. 1.TeamViewer官方检测使用环境是否为商用的标准是 ...

  3. PHP服务器环境打开配置文件

    MAC 1.  cd /usr/local/etc/nginx/servers vim www.xxx.com 2. 在/usr/local/etc/nginx/servers目录下,不同的 .con ...

  4. 洛古——P1433 吃奶酪

    https://www.luogu.org/problem/show?pid=1433 题目描述 房间里放着n块奶酪.一只小老鼠要把它们都吃掉,问至少要跑多少距离?老鼠一开始在(0,0)点处. 输入输 ...

  5. httpclient 模拟浏览器动作需注意的cookie和HTTP头等信息

    转自:http://resolute.javaeye.com/blog/491701 commons-httpclient是apache下的一个开源项目,提供了一个纯java实现的http客户端.使用 ...

  6. WinXP局域网共享设置

    关闭局域网共享 1.不允许SAM帐户和共享的匿名枚举(系统默认是允许的). 组策略-计算机配置-Windows 设置-安全设置-本地安全策略-安全选项-网络访问:不允许SAM帐户和共享的匿名枚举. 设 ...

  7. Altium Designer中死铜的问题

  8. mysql三种带事务批量插入

    原文:mysql三种带事务批量插入 c#之mysql三种带事务批量插入 前言 对于像我这样的业务程序员开发一些表单内容是家常便饭的事情,说道表单 我们都避免不了多行内容的提交,多行内容保存,自然要用到 ...

  9. ASP.NET配置文件里经常使用到的节点信息

     web.config文件是一个XML文件,是以<confirguration>为根结点展开的. 上一面从宏观上解说了一下有关配置的文件的内容,以下是一些有关于配置文件经常使用的操作. ...

  10. swift项目第二天:初始化项目

    初始化项目 项目的部署版本 之后项目会运行在哪些系统中 横竖屏的支持 iPhone应用一般只支持横屏 iPhone游戏一般支持竖屏 iPad横竖屏都支持 设置项目的图标和启动图片 项目的图标(美工做好 ...