web-storage

Posted 前端小童鞋

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了web-storage相关的知识，希望对你有一定的参考价值。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>离线存储</title>
<link rel="stylesheet" href="">
</head>
<body>
<textarea id="value_text" cols="80" rows="10"></textarea>
<input id="btn_set" value="SET" type="button"></input>
<input id="btn_get" value="GET" type="button"></input>
<script type="text/javascript">
var btnSet = document.querySelector("#btn_set");
var btnGet = document.querySelector("#btn_get");
var txtValue = document.querySelector("#value_text");
btnGet.addEventListener("click",function(){
if (window.localStorage) {//兼容性判断
// txtValue.value = localStorage.getItem("key1");//两种方法，推荐使用
txtValue.value=localStorage[‘key1‘];
}

});
btnSet.addEventListener("click",function(){
if (window.localStorage) {
// localStorage.setItem("key1",txtValue.value);
localStorage[‘key1‘] = txtValue.value;
}

})
</script>
</body>
</html>

 

localStorage：离线存储，是永久的，如果不删除永远存在，是存储在local storage里面

sessionStorage：暂时的，浏览器关闭后消失，是存储在session storage里面

 

txtValue.value = localStorage.getItem("key1");
txtValue.value=localStorage[‘key1‘];

两种方法是一样的，但是如果键不存的话，localStorage.getItem返回的是"",localStorage[‘key1‘]返回的是undefined

 


































以上是关于web-storage的主要内容，如果未能解决你的问题，请参考以下文章