前端页面缓存系列之localStorage

localStorage作为HTML5本地存储web storage特性的API之一，
主要作用是将数据保存在客户端中，而客户端一般是指上海网站设计用户的计算机。
在移动设备上，由于大部分浏览器都支持web storage特性，
因此在android和ios等智能手机上的web浏览器都能正常使用该特性。
localStorage保存的数据，一般情况下是永久保存的，
也就是说只要采用localstorage保存信息，数据便一直存储在用户的客户端中。
即使用户关闭当前web浏览器后重新启动，数据让然存在。知道用户或程序明确制定删除，
数据的生命周期才会结束。在安全性方面，localstorage是域内安全的，
即localstorage是基于域的。任何在该域内的所有页面，都可以访问localstorage数据。
但让然存在一个问题，就是各个浏览器厂商的浏览器之间的数据是各自独立的。
也就是说，如果在firefox中使用localstorage存储一组数据，
在chrome浏览器下是无法读取的。同样，由于localstorage数据是保存在用户的设备中的，
因此同一个应用程序在不同设备上保存的数据是不同的。

JavaScript通过HTML5本地储存传值
由于是一个新的技术，你可以通过下面的代码检测你的浏览器是否支持

if(window.localStorage){
    alert('This browser supports localStorage');
}else{
    alert('This browser does NOT support localStorage');
}

储存变量的值

localStorage.name = $('input["name"="name"]').val();

读取变量的值

var myname = localStorage["name"];

一次性清除：
localStorage.clear()，

个别清除
localStorage.removeItem(key)

localStorage.length；    //返回本地数据的长度
获取第 n 个数据的 key 键值则调用key()方法：localStorage.key(n)

数据存储大小限制
IE 9          > 4999995 + 5 = 5000000
firefox 22.0 > 5242875 + 5 = 5242880
chrome 28.0 > 2621435 + 5 = 2621440
safari 5.1   > 2621435 + 5 = 2621440
opera   12.15 > 5M （超出则会弹出允许请求更多空间的对话框）

为了保证流畅性，一般只使用数据存储大小限制的一半

前端页面缓存系列之localStorage相关推荐

【前端页面缓存技术方案】
前端页面缓存技术方案关于页面缓存数据的纯前端技术方案背景项目存在的现有方案思考
vue切换路由页面数据缓存_Vue-Router实现前端页面缓存
一.使用情景在使用Vue开发单页面应用时,我们通常会使用Vue-Router进行页面导航,Vue-Router在进行路由切换的时候,页面是会重新加载,对应的生命周期函数也会再次执行一遍,但是在有些业 ...
微信小程序前端页面Demo系列之仿塞尔达攻略助手首页
前言 Hello!小伙伴! 非常感谢您阅读海轰的文章,倘若文中有错误的地方,欢迎您指出- 自我介绍 ଘ(੭ˊᵕˋ)੭ 昵称:海轰标签:程序猿|C++选手|学生简介:因C语言结识编程,随后转入计 ...
微信html页面缓存问题,浅谈微信页面入口文件被缓存解决方案_简单_前端开发者...
缓存对于前端页面来说,是加速页面加载的利器之一,但也同时带来了很多问题,比如新版本发布之后,怎么替换客户端上的缓存文件呢?大家一般的的解决方案主要有以下几种形式, 一般情况 1.添加版本号,在静态 l ...
Spring Boot中禁用缓存，修改前端页面实时生效
目录理论演示理论通过设计spring.thymeleaf.cache为false关闭存储功能! 编写好对应的html页面后,IDEA通过按Ctrl + F9编译页面,即可浏览修改后的前端页面. ...
高薪程序员面试题精讲系列77之如何防止前端页面重复提交请求？
一. 面试题及剖析 1. 今日面试题如何防止前端页面重复提交请求? 如何防止重复提交请求? 2. 题目剖析今天的面试问题,属于在考察我们应对具体问题时的解决思路和解决办法.这种针对具体业务.寻求解 ...
页面缓存导致数据错误
页面缓存导致数据错误服务端渲染(ssr)会将 API 数据做页面元素返回给前端, 而浏览器会认为是静态页面并将页面缓存, 导致每次访问时都是缓存用户数据. 页面又包含对数据的处理并提交. 当多端更新 ...
http --- 前端的缓存
前端的缓存分为: http缓存和浏览器缓存 http缓存: // 当客户端向服务器请求资源时,会先抵达浏览器缓存,如果浏览器有"要请求资源"的副本 // 就会从浏览器缓存中提取 ...
[转]Asp.net mvc 网站之速度优化 -- 页面缓存
网站速度优化的一般方法由于网站最重要的用户体验就是速度,特别是对于电子商务网站而言. 一般网站速度优化会涉及到几个方面: 1. 数据库优化 - 查询字段简历索引,使用数据库连接池和持久化,现在还有种 ...
前端页面优化：如何更快速将你的页面展示给用户？
前端页面优化:如何更快速将你的页面展示给用户? 现在许多公司往往注重后端优化,而忽略了前端优化想想如果辛苦优化了服务器,后台,排查了sql,却在最后页面加载展示的时候很慢,也得不偿失其实,前后台优化都 ...

前端页面缓存系列之localStorage

前端页面缓存系列之localStorage相关推荐

最新文章

热门文章