客户端存储之storage

最新推荐文章于 2023-06-17 00:21:47 发布

earth_small_ma

最新推荐文章于 2023-06-17 00:21:47 发布

阅读量783

点赞数

分类专栏：网络

本文链接：https://blog.csdn.net/earth_smallma/article/details/83094570

版权

网络专栏收录该内容

7 篇文章 0 订阅

订阅专栏

客户端存储之Storage

Storage(或者更准确的说——Web Storage)介绍

什么是Storage

Storage是一种Web存储机制（实现客户端存储的一种方式）

为什么会有Storage

Storage的目的是克服由cookie存储所带来的限制——当数据需要被严格控制在客户端而无需持续的将数据发送回服务器。其主要实现两个目标：
1.提供一种cookie之外的存储会话数据的途径
2.提供一种存储大量可以跨会话存在的数据的机制

Storage具体为？

在window对象下有一个Storage构造函数，而localStorage与sessionStorage都是Storage的实例，因此localStorage与sessionStorage实质都是对象。你可以在控制台打印看看：

在这里插入图片描述

localStorage与sessionStorage都是window下的全局对象，直接使用即可

本篇文章主要就是学习localStorage与sessionStorage

localStorage

怎么通过localStorage在客户端存取数据？

有两种方式实现：

通过属性访问表达式

前面已经说了——localStorage实际上就是一个对象。因此我们像平时存取对象的数据那样，便能通过localStorage在客户端存取数据了。如下：

localStorage.sentence='To be or not to be! That is a question!';

在这里插入图片描述

我们同样可以通过属性访问表达式去获取值，如：

var sentence = localStorage.sentence;

除此之外，通过属性访问表达式也能更改相关属性的值(因为localStorage本身为对象，因此其具有对象的特点)。但是我们一般不通过delete去删除存储的内容，而应使用其提供的API，下面会说到。

通过更正式的API

在这里插入图片描述

在Storage中提供了专门的增删改查方法

1.setItem(key,value)——将对应的键值传入，可实现数据存储

2.getItem(key)——将键传入，可以获取对应的数据

3.removeItem(key)——将键传入，可以删除对应数据

4.clear()——无参数，用于删除所有存储的数据

5.key(0~length-1的值)——获取对应位置的键，再结合其他方法实现相应操作

localStorage.setItem('x',1);//以x的名字存储一个数值
localStorage.getItem('x');//获取数值

//枚举所有存储的数据
for(var i = 0; i < localStorage.length; i++){//length表示所有键值对的总数
	var name = localStorage.key(i);//获取第i对的键
	console.log(localStorage.getItem(name));
}

localStorage.removeItem('x');//删除x项
localStorage.clear();//全部删除