html5 数据缓存,HTML5: 本地缓存

2024-06-07 00:02:55

HTML5 提供了两种在客户端存储数据的新对象：

localStorage：没有时间限制的数据存储，在同一个浏览器中，只要没被手动清理，第二天、第二周或下一年之后，数据依然可用。

sessionStorage：针对一个 session 的数据存储，针对一个 session 进行数据存储。当用户关闭浏览器窗口后，数据会被删除(而且只在当前窗口有效)。以下是使用这两个对象的例子：

在客户端存储数据

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

localStorage：没有时间限制的数据存储
sessionStorage：针对一个 session 的数据存储

localStorage的使用：

localStorage存储的数据没有时间限制。在同一个浏览器中，只要没被手动清理，第二天、第二周或下一年之后，数据依然可用。

例子：你在本机使用本浏览器第次浏览本页面。

sessionStorage的使用：

sessionStorage针对一个 session 进行数据存储。当用户关闭浏览器窗口后，数据会被删除(而且只在当前窗口有效)。

例子：你在本次打开此窗口后，第次浏览了本页面。

$(function(){

recordVisitCount();

recordSessionCount();

});

function recordVisitCount(){

if (localStorage.pagecount){

localStorage.pagecount=Number(localStorage.pagecount) +1;

} else {

localStorage.pagecount=1;

}

$("#visitCount").html(localStorage.pagecount);

}

function recordSessionCount(){

if (sessionStorage.pagecount) {

sessionStorage.pagecount = Number(sessionStorage.pagecount) + 1;

} else {

sessionStorage.pagecount = 1;

}

$("#visitCountPerSession").html(sessionStorage.pagecount);

}

运行结果如下：

(原创文章，转载请注明转自Clement-Xu的csdn博客。)

html5 数据缓存,HTML5: 本地缓存相关推荐

同时存多个变量缓存微信小程序_微信小程序缓存（本地缓存、异步缓存、同步缓存）详解...
微信小程序缓存关于本地缓存 1.wx.setStorage(wx.setStorageSync).wx.getStorage(wx.getStorageSync).wx.clearStorage( ...
MyBatis 缓存详解-一级缓存（本地缓存）介绍
一级缓存也叫本地缓存,MyBatis 的一级缓存是在会话(SqlSession)层面进行缓存的.MyBatis 的一级缓存是默认开启的,不需要任何的配置. 首先我们必须去弄清楚一个问题,在MyBati ...
客户端缓存（http缓存和本地缓存）
原文链接:https://juejin.im/post/6844904194680291342 http缓存 http缓存用于客户端储存一些不经常变化的静态文件(图片.css.js等).分为强制缓存和 ...
服务端分布式缓存与本地缓存
缓存技术是保障系统性能的基础技术.核心技术. 缓存发挥的作用 ① 最大程度上避免对数据库的并发查询,从而降低因为数据库资源不足导致的系统故障. ② 提升系统的响应速度,保证用户体验总之缓存使系统稳定 ...
分布式缓存与本地缓存的区别
分布式缓存与本地缓存的区别转载自:https://ost.51cto.com/posts/1002 缓存的概念: 在服务端中,缓存主要是指将数据库的数据加载到内存中,之后对该数据的访问都在内存中完成 ...
分布式缓存和本地缓存的区别
分布式缓存和本地缓存的区别 redis/memcached**分布式缓存**和map/guava**本地缓存**的区别什么是缓存一致性? redis/memcached分布式缓存和map/guava ...
分布式缓存redis+本地缓存Caffeine：多级缓存架构在行情系统中的应用
多级缓存架构在行情系统中的应用一为什么要有多级缓存二多级缓存架构三代码实现 @PreHeat 注解 CacheAspect 定时任务执行器PreheatTask LocalCacheSer ...
前端缓存（http缓存与本地缓存）
前端缓存主要是分为http缓存和本地缓存 http 缓存强缓存:Expires(过期时间)/ Cache-Control(no-cache)(优先级高) 协商缓存:Last-Modified/Eta ...
微信小程序之缓存（本地缓存，同步缓存，异步缓存）
关于本地缓存 1.wx.setStorage(wx.setStorageSync).wx.getStorage(wx.getStorageSync).wx.clearStorage(wx.clearS ...
微信小程序缓存（本地缓存，同步缓存，异步缓存）
关于本地缓存 1.wx.setStorage(wx.setStorageSync).wx.getStorage(wx.getStorageSync).wx.clearStorage(wx.clearS ...

最新文章

热门文章