快捷導(dǎo)航

Javascript本地存儲localStorage看這一篇就夠了

更新時(shí)間：2024年07月30日 11:30:55 作者：聽海邊濤聲

這篇文章主要給大家介紹了關(guān)于Javascript本地存儲localStorage的相關(guān)資料,localStorage會可以將第一次請求的數(shù)據(jù)直接存儲到本地,這個(gè)相當(dāng)于一個(gè)5M大小的針對于前端頁面的數(shù)據(jù)庫,需要的朋友可以參考下

介紹

數(shù)據(jù)存儲在用戶瀏覽器中，其實(shí)是保存在硬盤中
頁面刷新不丟失數(shù)據(jù)
sessionStorage和localStorage約 5M 左右

localStorage ：

使用localStorage 可以將數(shù)據(jù)永久存儲在本地電腦中, 除非手動刪除，否則關(guān)閉頁面也會存在。
可以多窗口（頁面）共享（同一瀏覽器可以共享）
以鍵值對的形式存儲使用

存儲數(shù)據(jù)到localStorage

語法

localStorage.setItem(key, value)

示例

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <script>
    // 要存儲一個(gè)名字
    localStorage.setItem('uname', 'tom')
  </script>
</body>

</html>

打開另外一個(gè)頁面，localStorage保存的信息照樣存在：

獲取localStorage的數(shù)據(jù)

語法

localStorage.getItem(key)

示例

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <script>
    // 要存儲一個(gè)名字
    localStorage.setItem('uname', 'tom')
    // 獲取本地存儲
    console.log(localStorage.getItem('uname'))
  </script>
</body>

</html>

刪除localStorage的數(shù)據(jù)

語法

localStorage.removeItem(key)

示例

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <script>
    // 要存儲一個(gè)名字
    localStorage.setItem('uname', 'tom')
    // 獲取本地存儲
    // console.log(localStorage.getItem('uname'))
    localStorage.removeItem('uname')
  </script>
</body>

</html>

數(shù)據(jù)已經(jīng)刪除

修改localStorage的數(shù)據(jù)

修改localStorage的數(shù)據(jù)和localStorage新增數(shù)據(jù)的語法一樣。執(zhí)行localStorage.setItem(key, value)的時(shí)候，如果這個(gè)key已經(jīng)存在，就是修改；如果這個(gè)key不存在，就是新增。

示例：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <script>
    // 要存儲一個(gè)名字
    localStorage.setItem('uname', 'tom')
    // 獲取本地存儲
    // console.log(localStorage.getItem('uname'))
    // localStorage.removeItem('uname')
    // 修改數(shù)據(jù)
    localStorage.setItem('uname', 'andy')
  </script>
</body>

</html>

本地存儲只能存儲字符串

示例：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <script>
    // 保存年齡
    localStorage.setItem('age', 18)
    console.log(localStorage.getItem('age'))
    // 本地存儲的是字符串類型
    console.log(typeof localStorage.getItem('age'))
  </script>
</body>

</html>

這個(gè)18是字符串類型：