快捷導(dǎo)航

Javascript本地存儲(chǔ)localStorage看這一篇就夠了

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

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

介紹

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

localStorage ：

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

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

語(yǔ)法

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>
    // 要存儲(chǔ)一個(gè)名字
    localStorage.setItem('uname', 'tom')
  </script>
</body>

</html>

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

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

語(yǔ)法

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>
    // 要存儲(chǔ)一個(gè)名字
    localStorage.setItem('uname', 'tom')
    // 獲取本地存儲(chǔ)
    console.log(localStorage.getItem('uname'))
  </script>
</body>

</html>

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

語(yǔ)法

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>
    // 要存儲(chǔ)一個(gè)名字
    localStorage.setItem('uname', 'tom')
    // 獲取本地存儲(chǔ)
    // console.log(localStorage.getItem('uname'))
    localStorage.removeItem('uname')
  </script>
</body>

</html>

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

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

修改localStorage的數(shù)據(jù)和localStorage新增數(shù)據(jù)的語(yǔ)法一樣。執(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>
    // 要存儲(chǔ)一個(gè)名字
    localStorage.setItem('uname', 'tom')
    // 獲取本地存儲(chǔ)
    // console.log(localStorage.getItem('uname'))
    // localStorage.removeItem('uname')
    // 修改數(shù)據(jù)
    localStorage.setItem('uname', 'andy')
  </script>
</body>

</html>

本地存儲(chǔ)只能存儲(chǔ)字符串

示例：

<!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'))
    // 本地存儲(chǔ)的是字符串類(lèi)型
    console.log(typeof localStorage.getItem('age'))
  </script>
</body>

</html>

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

總結(jié)

到此這篇關(guān)于Javascript本地存儲(chǔ)localStorage的文章就介紹到這了,更多相關(guān)Javascript本地存儲(chǔ)localStorage內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: