localStorage.html 1.2 KB

12345678910111213141516171819202122232425262728293031323334353637383940
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6. <title>localStorage</title>
  7. </head>
  8. <body>
  9. <h2>localStorage</h2>
  10. <button onClick="saveData()">点我保存一个数据</button>
  11. <button onClick="readData()">点我读取一个数据</button>
  12. <button onClick="deleteData()">点我删除一个数据</button>
  13. <button onClick="deleteAllData()">点我清空数据</button>
  14. <script type="text/javascript">
  15. let p = {name:'张三',age:18}
  16. function saveData(){
  17. localStorage.setItem('msg','hello!')
  18. localStorage.setItem('msg2',666) //666最终会被转换成字符串存储
  19. localStorage.setItem('person',JSON.stringify(p))
  20. }
  21. function readData(){
  22. console.log(localStorage.getItem('msg'))
  23. console.log(localStorage.getItem('msg2'))
  24. const result = localStorage.getItem('person')
  25. console.log(JSON.parse(result))
  26. }
  27. function deleteData(){
  28. localStorage.removeItem('msg2')
  29. }
  30. function deleteData(){
  31. localStorage.clear()
  32. }
  33. </script>
  34. </body>
  35. </html>