localStorage和sessionStorage 2021.12.30

一、localStorage和sessionStorage的异同点（Html5新特性）

相同点：

1.都保存在客户端。

2.只能存储字符串类型。

3.以键值对的形式保存数据。

不同点：

localStorage：本地存储，永久性存储，除非用户自己清除。

sessionStorage：会话存储，临时性存储，生命周期为当前窗口或标签页，一旦窗口或标签页被永久关闭了，那么存储的数据也会被清空。

语法：

setItem(key, value) —— 保存数据，以键值对的方式存储信息

getItem(key) ——获取数据，将键值传入，即可获取到对应的value值

removeItem(key) —— 删除单个数据，根据键值移除对应的信息

clear() —— 删除所有的数据

key(index) —— 获取某个索引的key

示例：

​
window.localStorage.setItem('name','Karry')
	// key : 数据的名称
	// value : 数据
	// 所存储的是数据必须是string类型



​window.sessionStorage.setItem('hobby','singing')
    // key : 数据的名称
 	// value : 数据
	// 所存储的是数据必须是string类型

二、怎么把数组或者对象存到本地缓存中？又怎么取出？

说明：localStorage和sessionStorage只能存储字符串，所以要把数组、对象转为字符串再存，而取出来的时候再转为相应的类型即可。

示例：

<script>
​//存储数组
var arrList= ['北京'、'上海'、'广州'、'深圳'、'西安']
存：localStorage.setItem('arrList',JSON.