一、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存值与取值的三种方式，具体用哪种方式都可以，其中官方推荐的是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的删除：

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>

　　

localStorage详细总结的更多相关文章

  1. 前端——localStorage详细总结

    一.localStorage简介: 在HTML5中,新加入了一个localStorage特性,这个特性主要是用来作为本地存储来使用的,解决了cookie存储空间不足的问题(cookie中每条cooki ...

  2. H5本地存储详细使用教程（localStorage + JSON数据存储应用框架）

    一.Web Storage教程 1.概述: 对于Web Storage来说,实际上是Cookies存储的进化版.如果了解Cookie的人几乎一看Web Storage就会用,如果你从来没用过没了解过C ...

  3. Cookie, LocalStorage 与 SessionStorage

    Cookie, LocalStorage 与 SessionStorage相同点 都是储存在用户本地的数据. 意义在于避免数据在浏览器和服务器间不必要地来回传递. 三者的特点     同属于html5 ...

  4. HTML5 postMessage 和 onmessage API 详细应用

    随着 HTML5 的发展,了解并熟悉 HTML5 的 API 接口是非常重要的.postMessage(send) 和 onmessage 此组 API 在 HTML5 中有着广泛的应用,比如 Web ...

  5. HTML5 LocalStorage 本地存储的用法

    本地存储变量b的值: localStorage.setItem("b","isaac"); 本地获取变量b的值: localStorage.getItem(&q ...

  6. 详说 Cookie, LocalStorage 与 SessionStorage

    本文最初发布于我的个人博客:咀嚼之味 最近在找暑期实习,其中百度.网易游戏.阿里的面试都问到一些关于HTML5的东西,问题大多是这样开头的:“你用过什么HTML5的技术呀?” 而后,每次都能扯到 Co ...

  7. 开扒本地存储—localStorage

    .localStorage是什么狂点查看demo localStorage用于持久化的本地存储,除非主动删除数据,否则数据是永远不会过期 的. 2.localStorage有哪些优点 1). 存储空间 ...

  8. localStorage ， sessionStorage ，cookie 使用介绍

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  9. 基于vue2.0+vuex+localStorage开发的本地记事本

    本文采用vue2.0+vuex+localStorage+sass+webpack,实现一个本地存储的记事本.兼容PC端和移动端.在线预览地址:DEMO github地址:https://github ...

随机推荐

  1. thinkphp model 创建之后访问后的错误···

    解决:在php.ini里边先开启mysql的pdo扩展

  2. React中控制台警告

    1.dll_lib.js:1 Warning: bind(): You are binding a component method to the component. React does this ...

  3. tracert和traceroute介绍

    一.tracert和traceroute简介 相同点:都是用来跟踪路由,帮助排查问题,关注的是过程,而ping关注的是结果 不同点:tracert请求是icmp echo报文 traceroute请求 ...

  4. div css float布局用法

    float的应用与用法 想要知道float的用法,首先你要知道float在网页中的用处. 浮动的目的就是为了使得设置的对象脱离标准文档流. 什么是标准文档流? 网页在解析的时候,遵循于从上向下,从左向 ...

  5. DFS-递归入门

    [递归入门] 题目描述 已知 n 个整数b1,b2,-,bn 以及一个整数 k(k<n). 从 n 个整数中任选 k 个整数相加,可分别得到一系列的和. 例如当 n=4,k＝3,4 个整数分别为 ...

  6. （四十八）c#Winform自定义控件-下拉按钮

    前提 入行已经7,8年了,一直想做一套漂亮点的自定义控件,于是就有了本系列文章. GitHub:https://github.com/kwwwvagaa/NetWinformControl 码云:ht ...

  7. Docker安装Skywalking APM分布式追踪系统

    环境介绍 本文使用虚拟机unbutu18+docker.本unbutu18系统IP地址为:192.168.150.134 大家在使用时记得将此地址换成自己的实际地址. docker的安装可参考:htt ...

  8. Delphi - cxGrid添加Footer显示

    cxGrid - 添加footer显示 1:添加Footer Items 单击cxGrid Customize... ,Summary,Add: 2:添加Footer items数据绑定 选中一条需要 ...

  9. 机器学习性能度量指标:ROC曲线、查准率、查全率、F1

    错误率 在常见的具体机器学习算法模型中,一般都使用错误率来优化loss function来保证模型达到最优. \[错误率=\frac{分类错误的样本}{样本总数}\] \[error=\frac{1} ...

  10. 牛客2018多校第六场 J Heritage of skywalkert - nth_element

    传送门 题意:提供一个随机生成函数,让你生成n个数,然后问你其中能找到的两个数的最小公倍数 最大 是多少. 思路:可以用nth_element()函数在O(n)下求出前 15 个大的数(当然,100个 ...