前端存储 - localStorage
发布自Kindem的博客,欢迎大家转载,但是要注意注明出处
localStorage 介绍
在HTML5中,引入了两个新的前端存储特性:
- localStorage
- sessionStorage
这两者非常相似,都是用来在前端保存一定量的数据,称为前端存储,但是这两者仍然存在一定区别:
生命周期:
- localStorage: localStorage的生命周期是永久的,即使关闭页面、浏览器,其中的内容也不会消失,除非手动删除localStorage中的内容
- sessionStorage: sessionStorage的生命周期是一次浏览器窗口会话,浏览器窗口指的是一组同源页面(来自于一个域名)的浏览器页面集合,当这些窗口全部关闭之后,sessionStorage的内容将不会存在
存储大小:
- 两者都为5MB/域名
存储位置:
- 两者都保存在客户端,不与服务器进行交互
存储内容类型:
- 两者都只能存储字符串,但是可以通过类型转换来存储各类数据
获取方式:
- localStorage: window.localStorage
- sessionStorage: sessionStorage
可见localStorage适合在前端存储长时间使用的数据, 而sessionStorage适合存储短期使用、一次性的数据
另外这里要提一句,sessionStorage并不是session:
- sessionStorage中的‘session’是指浏览器窗口会话,而后者的‘session’指的是服务器会话
- 前者是前端存储,与服务器无关,而后者的实现依赖于服务器
这里只介绍更加常用的localStorage的使用,而sessionStorage的使用其实也类似
localStorage的使用
localStorage作为一个在HTML5中引入的特性,在IE6/7等一些低版本的浏览器中是无法被支持的,所以建议在使用localStorage之前先检查浏览器支持情况:
if (!window.localStorage) {
// 当浏览器不支持 localStorage ...
} else {
// 浏览器支持 localStorage ...
}
localStorage的使用也很简单,在localStorage中,数据都是以键值对的形式存在,可以使用json对象的形式直接对localStorage中的键值对进行操作:
// 设置数据
localStorage.a = 'hello';
localStorage.b = 'zero';
// 读取数据
console.log(localStorage.a);
console.log(localStorage.b);
就那么简单
但是这里要注意一点,存储在localStorage中的数据一定是以字符串形式存在的,所以当你存入/读取其他形式的数据时,需要进行类型转换才行:
// 存入 json 数据
localStorage.jsonTest = JSON.stringify({
a: 'hello',
b: 'zero'
});
// 读取 json 数据
console.log(JSON.parse(localStorage.jsonTest).a);
console.log(JSON.parse(localStorage.jsonTest).b);
使用js库来操作localStorage
有很多js库提供了一系列简化localStorage并且提供跨平台操作的功能,使用它们可以更加轻易地使用localStorage,这里介绍一个js库——store.js
store.js 的一大优点就是他将为你自动进行类型转换,相当于你可以直接在 localStorage 中储存诸如 json 对象等类型的数据,这些对你来说是透明的
安装:
npm install store
API:
// 引入
let store = require('store');
// 设置数据
store.set('user', {
name: 'Kindem'
});
// 获取数据
let obj = store.get('user');
// 删除数据
store.remove('user');
// 删除所有数据
store.clearAll();
// 遍历键值对
store.each((value, key) => {
// do something ...
});
参考
前端存储 - localStorage的更多相关文章
- HTML5 JS API 本地存储LocalStorage基本操作
LocalStorage:使用方法与SessionStorage如出一辙,如下代码所示:此对象主要有两个方法:保存数据:localStorage.setItem(Key, value);读取数据:lo ...
- 前端存储之indexedDB
在前一个阶段的工作中,项目组要开发一个平台,为了做出更好的用户体验,实现快速.高质量的交互,从而更快得到用户的反馈,要求在前端把数据存储起来,之后我去研究了下现在比较流行的前端存储数据库,找到了ind ...
- 一起来做chrome扩展《本地存储localStorage》
chrome中的本地存储其实也是用的HTML5中localStorage,唯一区别是chrome扩展有自己的localStorage,它属于这个扩展,而不属于一个域名.得用这一点可以很好的处理扩展自己 ...
- 移动端浏览器隐私模式/无痕模式使用本地存储localStorage/sessionStorage的问题
移动端浏览器隐私模式/无痕模式使用本地存储localStorage/sessionStorage的问题 开发H5 webapp时经常需要使用本地存储,如localStorage和sessionStor ...
- html5的本地存储localStorage和sessionStorage
html5的本地存储localStorage和sessionStorage html5中新增的比较重要的一个功能就是web storage来实现客户端本地存储数据,之前存储数据都是用cookie来实现 ...
- 本地存储localStorage sessionStorage 以及 session 和cookie的对比和使用
cookie和session都是用来跟踪浏览器用户身份的会话方式. 1.验证当前服务中继续请求数据时,哪些缓存数据会随着发往服务器? 只有cookie中设置的缓存数据会发送到服务器端 2. 强调几点: ...
- 本地存储localStorage以及它的封装接口store.js的使用
本地存储localStorage以及它的封装接口store.js的使用 sublime-text chrome javascript readyGo 2016年11月20日发布 0 推荐 9 收藏 ...
- 前端存储之Web Sql Database
前言 在上一篇前端存储之indexedDB中说到,我们项目组要搞一个前后端分离的项目,要求在前端实现存储,我们首先找到了indexedDB,而我们研究了一段时间的indexedDB后,发现它并不是很适 ...
- 本地存储 localStorage
本地存储localStorage 概念:window对象下面的属性,html5新增的,将5M大小的数据存储本地的浏览器上面. 浏览器支持存储5M大小 本地存储localStorage特点 本地存储属于 ...
随机推荐
- npm cnpm yarn 安装
安装node.js,其中已经集成了npm,可以将npm切换到国内镜像 $ npm config set registry https://registry.npm.taobao.org -- 配置后可 ...
- iptables使用详解(centos7)
安装前 里面有iptables的命令 [root@mcw01 ~]$ rpm -qa|grep iptables iptables-1.4.21-18.0.1.el7.centos.x86_64 [r ...
- 10 分钟讲完 QUIC 协议。
建议阅读本文需要搭配作者 HTTP 相关文章食用. 历史 HTTP 系列文章: 看完这篇HTTP,跟面试官扯皮就没问题了 HTTP 2.0 ,有点炸 ! 这里先来回顾一下 HTTP 的发展过程.首先, ...
- 在Windows 10 上安装使用binwalk
Windows 10 推出的WSL 功能可以协助我们直接使用binwalk 分析Windows 内的文件 文章更新时间:2020年3月11日 一.WSL 准备 1.打开控制面板→程序和功能→启动或关闭 ...
- MySQL — 索引
目录 1.索引概述 2.索引结构 3.索引分类 4.索引语法 5.SQL 性能分析 5.1.执行频次 5.2.慢日志查询 5.3.profile 5.4.explain 6.索引使用规则 6.1.单列 ...
- RandomStringUtils 生成随机字符串
代码: System.out.println(RandomStringUtils.randomAlphanumeric(32));System.out.println(RandomStringUtil ...
- 采用二进制文件方式安装loki和promtail
1. 下载二进制文件 官方下载地址:https://github.com/grafana/loki/releases 下载如图所示的这俩文件,Grafana采用yum方式安装 cd /usr/loca ...
- redis持久化 RDB与AOF
redis持久化 RDB与AOF RDB与AOF区别 rdb: 基于快照的持久化,速度更快,一般用做备份,主从复制也是依赖于rdb持久化功能 aof:以追加的方式记录redis操作日志的文件,可以最大 ...
- django之分页,纯python代码
Django中分页 py文件代码 """ 自定义分页组件 可以返回分页的数据和分页的HTML代码 """ from django.http ...
- 6月4日 python学习总结 装饰器复习
1. 装饰器的原理以及为什么要使用装饰器 在代码运行期间动态增加功能的方式,称之为"装饰器"(Decorator). 在不影响原代码结构的情况下为其添加功能 2. 装饰器的基本 ...