localStorage詳細總結
- 2019 年 10 月 5 日
- 筆記
一、localStorage簡介：
在HTML5中，新加入了一個localStorage特性，這個特性主要是用來作為本地存儲來使用的，解決了cookie存儲空間不足的問題(cookie中每條cookie的存儲空間為4k)，localStorage中一般瀏覽器支援的是5M大小，這個在不同的瀏覽器中localStorage會有所不同。
二、localStorage的優勢與局限：
優勢：
1、localStorage拓展了cookie的4K限制 2、localStorage會可以將第一次請求的數據直接存儲到本地，這個相當於一個5M大小的針對於前端頁面的資料庫，相比於cookie可以節約頻寬，但是這個卻是只有在高版本的瀏覽器中才支援的
局限：
1、瀏覽器的大小不統一，並且在IE8以上的IE版本才支援localStorage這個屬性 2、目前所有的瀏覽器中都會把localStorage的值類型限定為string類型，這個在對我們日常比較常見的JSON對象類型需要一些轉換 3、localStorage在瀏覽器的隱私模式下面是不可讀取的 4、localStorage本質上是對字元串的讀取，如果存儲內容多的話會消耗記憶體空間，會導致頁面變卡 5、localStorage不能被爬蟲抓取到
三、localStorage的使用：
localStorage是html5的新特性，所以並不是所有的瀏覽器都支援，因此在使用localStorage時需要先判斷瀏覽器是否支援localStorage。
下面這段程式碼就是用來判斷瀏覽器是否支援localStorage
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>localStorage</title>
</head>
<body>
<script>
if (window.localStorage) {
alert("瀏覽器支援localStorage")
} else {
alert("瀏覽器不支援localStrorage")
}
</script>
</body>
</html>
既然localStorage是用來存取數據的，那我們先從localStorage存數據開始說起
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>localStorage</title>
</head>
<body>
<script>
if (window.localStorage) {
var storage=window.localStorage;
storage.a="我是a"
alert(storage.a)
} else {
alert("瀏覽器不支援localStrorage")
}
</script>
</body>
</html>
上面的程式碼我們在localStorage中存取了一個欄位a，值是"我是a"
localStorage支援多種存取值的方式，我們一一來看一下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>localStorage</title>
</head>
<body>
<script>
if (window.localStorage) {
var storage=window.localStorage;
//第一種存值方式
storage.a="我是a"
//第二種存值方式
storage['b']=100
//第三種存值方式
storage.setItem('c',"我是c")
//第一種取值方式
var one=storage.a;
alert("第一種取值："+one)
//第二種取值方式
var two=storage['b']
alert("第二種取值："+two)
//第三種取值方式
var three=storage.getItem('c')
alert("第三種取值："+three)
} else {
alert("瀏覽器不支援localStrorage")
}
</script>
</body>
</html>
上面介紹了localStorage存值與取值的三種方式，具體用哪種方式都可以，其中官方推薦的是getItemsetItem這兩種方法對其進行存取
那麼數據存放進去我們如果想要修改該怎麼辦？別急，看下面程式碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>localStorage</title>
</head>
<body>
<script>
if (window.localStorage) {
var storage=window.localStorage;
storage.setItem('a',"我是a")
var before=storage.getItem('a')
alert("修改前的a："+before)
storage.setItem('a',"a被修改了")
var after=storage.getItem('a')
alert("修改之後的a："+after)
} else {
alert("瀏覽器不支援localStrorage")
}
</script>
</body>
</html>
localStorage的刪除：
1、清空localStorage：調用localStorage的clear方法將清空localStorage中的所有內容
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>localStorage</title>
</head>
<body>
<script>
if (window.localStorage) {
var storage=window.localStorage;
storage.a="我是a"
storage['b']=100
storage.setItem('c',"我是c")
alert("刪除前的a："+storage.getItem('a'))
storage.clear()//清空localStorage
alert("刪除後的a："+storage.getItem('a'))
} else {
alert("瀏覽器不支援localStrorage")
}
</script>
</body>
</html>
2、刪除某個值：調用localStorage的removeItem()方法刪除某個值
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>localStorage</title>
</head>
<body>
<script>
if (window.localStorage) {
var storage=window.localStorage;
storage.a="我是a"
storage['b']=100
storage.setItem('c',"我是c")
alert("刪除前的a："+storage.getItem('a'))
storage.removeItem('a')
alert("刪除後的a："+storage.getItem('a'))
} else {
alert("瀏覽器不支援localStrorage")
}
</script>
</body>
</html>
localStorage的鍵獲取
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>localStorage</title>
</head>
<body>
<script>
if (window.localStorage) {
var storage=window.localStorage;
storage.a="我是a"
storage['b']=100
storage.setItem('c',"我是c")
for(var i=0;i<storage.length;i++){
var key=storage.key(i);
alert(key);
}
} else {
alert("瀏覽器不支援localStrorage")
}
</script>
</body>
</html>
四、localStorage的注意事項：
1、localStorage中存放的是String類型的值
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>localStorage</title>
</head>
<body>
<script>
if (window.localStorage) {
var storage=window.localStorage;
storage.a=100
alert(typeof(storage.a))
} else {
alert("瀏覽器不支援localStrorage")
}
</script>
</body>
</html>
我們看到上述程式碼列印的結果為string，雖然我們存放的是int類型的值，但是localStorage還是把它當做string類型來存放
2、如果我們需要將JSON格式的數據存放到localStorage中，則需要藉助JSON.stringify()這個方法，來將JSON轉換成為JSON字元串
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>localStorage</title>
</head>
<body>
<script>
if (window.localStorage) {
var storage=window.localStorage;
var data={
name:'xiaowang',
sex:'man',
love:'籃球'
};
var d=JSON.stringify(data);
storage.setItem("data",d);
console.log(storage.data);
} else {
alert("瀏覽器不支援localStrorage")
}
</script>
</body>
</html>
讀取之後要將JSON字元串轉換成為JSON對象，使用JSON.parse()方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>localStorage</title>
</head>
<body>
<script>
if (window.localStorage) {
var storage=window.localStorage;
var data={
name:'xiaowang',
sex:'man',
love:'籃球'
};
var d=JSON.stringify(data);
storage.setItem("data",d);
var json=storage.getItem('data')
var jsonObj=JSON.parse(json)
alert(typeof(jsonObj))//結果是object
} else {
alert("瀏覽器不支援localStrorage")
}
</script>
</body>
</html>
