当前位置: 首页 > news >正文

前端存储 - 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 ...
});

参考

  • https://www.cnblogs.com/cencenyue/p/7604651.html
  • https://www.cnblogs.com/st-leslie/p/5617130.html
  • http://www.w3school.com.cn/html5/html_5_webstorage.asp
  • https://www.npmjs.com/package/store

相关文章:

  • Xamarin Essentials教程剪贴板Clipboard
  • ES6 系列之迭代器与 for of
  • CSS 全解析实战(三)-CSS 基础
  • 用栅栏(CyclicBarrier)实现高并发测试
  • Kudu vs HBase
  • springboot系列(一) Spring Boot浅谈(转载)
  • UITableView 的头视图和分区视图
  • 进击的 JavaScript(四) 之 闭包
  • netty源码分析
  • Android开发 Firebase动态链接打开APP
  • js进阶 12-18 jquery如何实现自定义右键菜单(把问题分细)
  • 数据结构之串
  • Linux命令三剑客
  • 我的免费静态博客
  • 崛起于Springboot2.X之配置文件详解(10)
  • [译] 怎样写一个基础的编译器
  • 【162天】黑马程序员27天视频学习笔记【Day02-上】
  • 10个确保微服务与容器安全的最佳实践
  • Apache的80端口被占用以及访问时报错403
  • C++11: atomic 头文件
  • ES6之路之模块详解
  • git 常用命令
  • leetcode98. Validate Binary Search Tree
  • maven工程打包jar以及java jar命令的classpath使用
  • NLPIR语义挖掘平台推动行业大数据应用服务
  • Service Worker
  • SOFAMosn配置模型
  • SpiderData 2019年2月23日 DApp数据排行榜
  • windows下mongoDB的环境配置
  • Yeoman_Bower_Grunt
  • 高程读书笔记 第六章 面向对象程序设计
  • 构建工具 - 收藏集 - 掘金
  • 判断客户端类型,Android,iOS,PC
  • 批量截取pdf文件
  • 如何胜任知名企业的商业数据分析师?
  • 数据科学 第 3 章 11 字符串处理
  • 测评:对于写作的人来说,Markdown是你最好的朋友 ...
  • # 手柄编程_北通阿修罗3动手评:一款兼具功能、操控性的电竞手柄
  • (06)金属布线——为半导体注入生命的连接
  • (二)斐波那契Fabonacci函数
  • (六)软件测试分工
  • (三分钟了解debug)SLAM研究方向-Debug总结
  • (十)【Jmeter】线程(Threads(Users))之jp@gc - Stepping Thread Group (deprecated)
  • (原創) 如何讓IE7按第二次Ctrl + Tab時,回到原來的索引標籤? (Web) (IE) (OS) (Windows)...
  • (转)机器学习的数学基础(1)--Dirichlet分布
  • **python多态
  • .NET CLR基本术语
  • .net core 连接数据库,通过数据库生成Modell
  • .net core使用RPC方式进行高效的HTTP服务访问
  • .NET/C# 编译期间能确定的相同字符串,在运行期间是相同的实例
  • /etc/skel 目录作用
  • @WebServiceClient注解,wsdlLocation 可配置
  • [Android]使用Retrofit进行网络请求
  • [bzoj1038][ZJOI2008]瞭望塔
  • [BZOJ3223]文艺平衡树