HTML 5 存储

港控/mmm° 2022-02-15 07:00 159阅读 0赞

> **小编推荐：[Fundebug][]提供JS错误监控、微信小程序错误监控、微信小游戏错误监控，Node.j错误监控和Java错误监控。真的是一个很好用的错误监控费服务，众多大佬公司都在使用。**

## Web Storage教程 ##

### 1、概述： ###

对于Web Storage来说，实际上是Cookies存储的进化版。如果了解Cookie的人几乎一看Web Storage就会用，如果你从来没用过没了解过Cookie，没关系，看了这篇文章照样轻松玩转Web Storage。首先，学习Web Storage只需背熟这句口诀：“两个接口，四个函数”。

### 2、口诀： ###

（1）两个接口：分别是localStorage和sessonStorage  
（2）四个函数：分别是setItem、getItem、removeItem和clear

### 3、localStorage： ###

（1）特性：  
域内安全、永久保存。即客户端或浏览器中来自同一域名的所有页面都可访问localStorage数据且数据除了删除否则永久保存，但客户端或浏览器之间的数据相互独立。  
（2）四个函数：  
A. localStorage.setItem 存储数据信息到本地  
B. localStorage.getItem 读取本地存储的信息  
C. localStorage.removeItem 删除本地存储的信息  
D. localStorage.clear 清空所以存储的信息

### 4、sessonStorage： ###

（1）特性：  
会话控制、短期保存。会话概念与服务器端的session概念相似，短期保存指窗口或浏览器或客户端关闭后自动消除数据。  
（2）四个函数：  
A. sessionStorage.setItem 存储数据信息到本地  
B. sessionStorage.getItem 读取本地存储的信息  
C. sessionStorage.removeItem 删除本地存储的信息  
D. sessionStorage.clear 清空所以存储的信息

### 5、四个函数的用法： ###

（1）localStorage.setItem(键名，键值)  
在本地客户端存储一个字符串类型的数据，其中，第一个参数“键名”代表了该数据的标识符，而第二个参数“键值”为该数据本身。如：  
localStorage.setItem("coffeeType", "mocha"); //存储键名为coffeeType和键值为mocha的数据到本地  
localStorage.setItem("coffeePrice", "28"); //有了上一句做参考，这句意思你该理解了吧  
（2）localStorage.getItem(键名)  
读取已存储在本地的数据，通过键名作为参数读取出对应键名的数据。如：  
var data = localStorage.getItem("coffeeType"); //读取对应键名为coffeeType的数据  
（3）localStorage.removeItem(键名)  
移除已存储在本地的数据，通过键名作为参数删除对应键名的数据。如：  
localStorage.removeItem("coffeeType"); //从本地存储中移除键名为coffeeType的数据  
（4）localStorage.clear()  
移除本地存储所有数据。如：  
localStorage.clear(); //保存着的"coffeePrice/28"键/值对也被移除了，所有本地数据拜拜  
（5）另外，sessionStorage中的四个函数与以上localStorage类的函数用法基本一致，就不再详解。

6、兼容问题：  
有人会说本地存储是H5的新贵，但是对于老、旧的浏览器来说怎么办？那就不用老古董浏览器呗，或者使用cookie作为替代。因为大多使用localStorage是用来存储字符串的，在其他编译型的语言看来，存储字符串能做些什么，但在javascript身上，旧大放光彩，可以存储JSON格式的字符串来扩展应用，可以存储类名变量值等等信息再通过eval()来感受使用JS的快感。既然localStorage是存储字符串的，那么在老古董浏览器上，可以通过使用Cookies来做替代方案并做好域内安全。

作者：O蚂蚁O  
链接：https://www.jianshu.com/p/660487a57c5d

[Fundebug]: https://www.fundebug.com/