localStorage詳細總結

時間  2019-11-07
標籤 localstorage 詳細 總結 简体版
原文   原文鏈接

1、localStorage簡介：

在HTML5中，新加入了一個localStorage特性，這個特性主要是用來做爲本地存儲來使用的，解決了cookie存儲空間不足的問題(cookie中每條cookie的存儲空間爲4k)，localStorage中通常瀏覽器支持的是5M大小，這個在不一樣的瀏覽器中localStorage會有所不一樣。html

 

2、localStorage的優點與侷限：

優點：前端

一、localStorage拓展了cookie的4K限制html5

二、localStorage會能夠將第一次請求的數據直接存儲到本地，這個至關於一個5M大小的針對於前端頁面的數據庫，相比於cookie能夠節約帶寬，可是這個倒是隻有在高版本的瀏覽器中才支持的數據庫

 

侷限：json

一、瀏覽器的大小不統一，而且在IE8以上的IE版本才支持localStorage這個屬性瀏覽器

二、目前全部的瀏覽器中都會把localStorage的值類型限定爲string類型，這個在對咱們平常比較常見的JSON對象類型須要一些轉換cookie

三、localStorage在瀏覽器的隱私模式下面是不可讀取的htm

四、localStorage本質上是對字符串的讀取，若是存儲內容多的話會消耗內存空間，會致使頁面變卡對象

五、localStorage不能被爬蟲抓取到blog

 

3、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存值與取值的三種方式，具體用哪一種方式均可以，其中官方推薦的是getItem\setItem這兩種方法對其進行存取

 

那麼數據存放進去咱們若是想要修改該怎麼辦？別急，看下面代碼：

<!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的刪除：

一、清空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>

　　

二、刪除某個值：調用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>

　　

 

4、localStorage的注意事項：

一、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類型來存放

 

二、若是咱們須要將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>
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程