发布自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的更多相关文章

  1. HTML5 JS API 本地存储LocalStorage基本操作

    LocalStorage:使用方法与SessionStorage如出一辙,如下代码所示:此对象主要有两个方法:保存数据:localStorage.setItem(Key, value);读取数据:lo ...

  2. 前端存储之indexedDB

    在前一个阶段的工作中,项目组要开发一个平台,为了做出更好的用户体验,实现快速.高质量的交互,从而更快得到用户的反馈,要求在前端把数据存储起来,之后我去研究了下现在比较流行的前端存储数据库,找到了ind ...

  3. 一起来做chrome扩展《本地存储localStorage》

    chrome中的本地存储其实也是用的HTML5中localStorage,唯一区别是chrome扩展有自己的localStorage,它属于这个扩展,而不属于一个域名.得用这一点可以很好的处理扩展自己 ...

  4. 移动端浏览器隐私模式/无痕模式使用本地存储localStorage/sessionStorage的问题

    移动端浏览器隐私模式/无痕模式使用本地存储localStorage/sessionStorage的问题 开发H5 webapp时经常需要使用本地存储,如localStorage和sessionStor ...

  5. html5的本地存储localStorage和sessionStorage

    html5的本地存储localStorage和sessionStorage html5中新增的比较重要的一个功能就是web storage来实现客户端本地存储数据,之前存储数据都是用cookie来实现 ...

  6. 本地存储localStorage sessionStorage 以及 session 和cookie的对比和使用

    cookie和session都是用来跟踪浏览器用户身份的会话方式. 1.验证当前服务中继续请求数据时,哪些缓存数据会随着发往服务器? 只有cookie中设置的缓存数据会发送到服务器端 2. 强调几点: ...

  7. 本地存储localStorage以及它的封装接口store.js的使用

    本地存储localStorage以及它的封装接口store.js的使用 sublime-text chrome javascript readyGo 2016年11月20日发布   0 推荐 9 收藏 ...

  8. 前端存储之Web Sql Database

    前言 在上一篇前端存储之indexedDB中说到,我们项目组要搞一个前后端分离的项目,要求在前端实现存储,我们首先找到了indexedDB,而我们研究了一段时间的indexedDB后,发现它并不是很适 ...

  9. 本地存储 localStorage

    本地存储localStorage 概念:window对象下面的属性,html5新增的,将5M大小的数据存储本地的浏览器上面. 浏览器支持存储5M大小 本地存储localStorage特点 本地存储属于 ...

随机推荐

  1. npm cnpm yarn 安装

    安装node.js,其中已经集成了npm,可以将npm切换到国内镜像 $ npm config set registry https://registry.npm.taobao.org -- 配置后可 ...

  2. iptables使用详解(centos7)

    安装前 里面有iptables的命令 [root@mcw01 ~]$ rpm -qa|grep iptables iptables-1.4.21-18.0.1.el7.centos.x86_64 [r ...

  3. 10 分钟讲完 QUIC 协议。

    建议阅读本文需要搭配作者 HTTP 相关文章食用. 历史 HTTP 系列文章: 看完这篇HTTP,跟面试官扯皮就没问题了 HTTP 2.0 ,有点炸 ! 这里先来回顾一下 HTTP 的发展过程.首先, ...

  4. 在Windows 10 上安装使用binwalk

    Windows 10 推出的WSL 功能可以协助我们直接使用binwalk 分析Windows 内的文件 文章更新时间:2020年3月11日 一.WSL 准备 1.打开控制面板→程序和功能→启动或关闭 ...

  5. MySQL — 索引

    目录 1.索引概述 2.索引结构 3.索引分类 4.索引语法 5.SQL 性能分析 5.1.执行频次 5.2.慢日志查询 5.3.profile 5.4.explain 6.索引使用规则 6.1.单列 ...

  6. RandomStringUtils 生成随机字符串

    代码: System.out.println(RandomStringUtils.randomAlphanumeric(32));System.out.println(RandomStringUtil ...

  7. 采用二进制文件方式安装loki和promtail

    1. 下载二进制文件 官方下载地址:https://github.com/grafana/loki/releases 下载如图所示的这俩文件,Grafana采用yum方式安装 cd /usr/loca ...

  8. redis持久化 RDB与AOF

    redis持久化 RDB与AOF RDB与AOF区别 rdb: 基于快照的持久化,速度更快,一般用做备份,主从复制也是依赖于rdb持久化功能 aof:以追加的方式记录redis操作日志的文件,可以最大 ...

  9. django之分页,纯python代码

    Django中分页 py文件代码 """ 自定义分页组件 可以返回分页的数据和分页的HTML代码 """ from django.http ...

  10. 6月4日 python学习总结 装饰器复习

    1.  装饰器的原理以及为什么要使用装饰器 在代码运行期间动态增加功能的方式,称之为"装饰器"(Decorator). 在不影响原代码结构的情况下为其添加功能 2.  装饰器的基本 ...