<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <p id="text">我是段落</p> <button onclick="saveText()">存储文字</button> <button onclick="getText()">取得文字</button> <button onclick="removeText()">删除文字</button> <p id="showText"></p> <script> window.onload=function(){
//浏览器加载时拿到本地存储的值 var showText=document.getElementById('showText'); var localP=localStorage.getItem('p') if(localP){ showText.innerHTML=localP; } } function saveText(){ var text=document.getElementById('text').innerHTML; localStorage.setItem('p',text); } function getText(){ var localP=localStorage.getItem('p'); var showText=document.getElementById('showText'); showText.innerHTML=localP; } function removeText(){ localStorage.removeItem('p') } </script> </body> </html>
如下是面向对象的写法,更直观了
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <p id="text">我是段落</p> <button onclick="doLocalStorage.saveText()">存储文字</button> <button onclick="doLocalStorage.getText()">取得文字</button> <button onclick="doLocalStorage.removeText()">删除文字</button> <p id="showText"></p> <script> window.onload=function(){ doLocalStorage.init(); } var doLocalStorage={ init:function(){ var showText=document.getElementById('showText'); var localP=localStorage.getItem('p') if(localP){ showText.innerHTML=localP; } }, saveText:function(){ var text=document.getElementById('text').innerHTML; localStorage.setItem('p',text); }, removeText:function(){ localStorage.removeItem('p') }, getText:function(){ var localP=localStorage.getItem('p'); var showText=document.getElementById('showText'); showText.innerHTML=localP; } } </script> </body> </html>