详解H5本地储存Web Storage

2020-04-21 22:48:42易采站长站整理

localStorage提供了四个方法来辅助我们进行对本地存储做相关操作。

(1)localStorage.setItem(键名,键值)在本地客户端存储一个字符串类型的数据,其中,第一个参数“键名”代表了该数据的标识符,而第二个参数“键值”为该数据本身。如:


localStorage.setItem("name", "张三"); //存储键名为name和键值为"张三"的数据到本地
localStorage.setItem("age", "28"); //存储键名为age和键值为"28"的数据到本地

(2)localStorage.getItem(键名) 读取已存储在本地的数据,通过键名作为参数读取出对应键名的数据。如:


var data = localStorage.getItem("name");
alert(data);//张三

(3)localStorage.removeItem(键名)移除已存储在本地的数据,通过键名作为参数删除对应键名的数据。如:


var data2 = localStorage.removeItem("name");//从本地存储中移除键名为name的数据
alert(data2); //undefined

(4)localStorage.clear() 移除本地存储所有数据。如:


localStorage.clear() 移除本地存储所有数据。如:
localStorage.clear(); //保存着的"age/28"和"name/张三"的键/值对也被移除了,所有本地数据拜拜

(5)另外,sessionStorage中的四个函数与以上localStorage类的函数用法基本一致,就不再详解。

下面是一个小实例:


<script type="text/javascript">

localStorage.setItem("name", "张三");
localStorage.setItem("age", "28");

verify(); //验证本地存储
localStorage.removeItem("name");
verify(); //验证name是否存在
localStorage.clear();
verify(); //验证name和age是否存在

//自定义验证函数,验证name和age的数据是否存在
function verify(){
var type = localStorage.getItem("name");
var price = localStorage.getItem("age");
type = type ? type : '不存在';
price = price ? price : '不存在';

alert( "name: " + type + "nn" + "age: " + price );
}

</script>

 三、localStorage过期策略

由于html5没有给本地存储设置过期策略,那么在处理数据的过期策略的时候可以编写自己过期策略程序,如下:


<!DOCTYPE>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Access-Control-Allow-Origin" content="anonymous">