前端存储 - localStorage

DandJ 发布于2019-08-22 18:34 / 2384人阅读

摘要：发布自的博客，欢迎大家转载，但是要注意注明出处介绍在中，引入了两个新的前端存储特性这两者非常相似，都是用来在前端保存一定量的数据，称为前端存储，但是这两者仍然存在一定区别生命周期的生命周期是永久的，即使关闭页面浏览器，其中的内容也不会消失，

发布自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

云服务器 GPU云服务器 localstorage存储存储localstorage 免费localstorage存储对象 localstorage

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/96000.html

前端存储

摘要：前端存储简介一种在前端保存数据的思想。为了保证前端性能，一般不会保存大量数据。在手动删除前一直存在关闭当前页面后被清除可存放大小与服务器通信每次都在头部信息中。前端存储简介一种在前端保存数据的思想。第一次在页面中的保存数据，那么从第二次开始就可以使用了。可以使用的方法有： cookie localeStorage sessionStorage ie的userData web s...

luckyw 2019-08-22 16:01 评论0 收藏0
前端存储

摘要：前端存储简介一种在前端保存数据的思想。为了保证前端性能，一般不会保存大量数据。在手动删除前一直存在关闭当前页面后被清除可存放大小与服务器通信每次都在头部信息中。前端存储简介一种在前端保存数据的思想。第一次在页面中的保存数据，那么从第二次开始就可以使用了。可以使用的方法有： cookie localeStorage sessionStorage ie的userData web s...

binaryTree 2019-08-06 13:30 评论0 收藏0
[聊一聊系列]聊一聊前端存储那些事儿

摘要：如图图顾名思义，，是级别的存储。如笔者写的一篇浅析文章聊一聊百度移动端首页前端速度那些事儿读者们可以尝试使用。欢迎大家收看聊一聊系列，这一套系列文章，可以帮助前端工程师们了解前端的方方面面（不仅仅是代码）：https://segmentfault.com/blog/frontenddriver 在web开发越来越复杂的今天，前端拥有的能力也越来越多。其中最重要的一项莫过于web存储。...

caige 2019-08-19 18:46 评论0 收藏0