一、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详细总结的更多相关文章

localStorage详细总结
一.localStorage简介: 在HTML5中,新加入了一个localStorage特性,这个特性主要是用来作为本地存储来使用的,解决了cookie存储空间不足的问题(cookie中每条cooki ...
ABP 往前端返回详细的错误信息
在这个类:MyABP.Web.Startup.MyABPWebMvcModule 中的 PreInitialize 方法添加一句: Configuration.Modules.AbpWebComm ...
flutter中存储键值对简单数据(相当于前端localstorage概念)
首先需要安装一个官方推荐包: 1 dependencies: 2 flutter: 3 sdk: flutter 4 shared_preferences: any // 先获取 shared pre ...
从2014年D2前端技术论坛看前端发展趋势
上周六有幸參加了在杭州阿里巴巴西溪园区举办的2014年D2前端技术论坛和晚上的酒会.实地感受了一下阿里巴巴前端开发的技术氛围和影响力.整体上看这次D2规模还是挺大的,国内前端的知名大牛基本上都到了. ...
ZooTeam 前端周刊｜第 111期
转: ZooTeam 前端周刊|第 111期 ZooTeam 前端周刊|第 111期浏览更多往期周刊,请访问: https://weekly.zoo.team 基于Vue的前端架构,我做了这15点 ...
django复习-2-配置、静态文件与路由
一.配置文件 1. BASE_DIR BASE_DIR = os.path.dirname(os.path.dirname(os.path.abspath(__file__))) __file__指当 ...
SpringBoot2 全局异常处理
参考这篇文章里面的几种异常形式: 全局异常处理是个比较重要的功能,一般在项目里都会用到. 大概把一次请求分成三个阶段,来分别进行全局的异常处理. 一:在进入Controller之前,譬如请求一个不存在 ...
高可用服务设计之二：Rate limiting 限流与降级
<高可用服务设计之二:Rate limiting 限流与降级> <nginx限制请求之一:(ngx_http_limit_conn_module)模块> <nginx限制 ...
Spring Boot--01错误处理
package com.smartmap.sample.ch1.controller.view; import java.io.IOException; import java.util.Collec ...

随机推荐

通过GSM模块发送经纬度求救信息。
本博客作为实验笔记,仅供学习交流.(转载请注明出处) 本实验通过GSM模块:SIM900a,实现向特定手机发送sos求救信号,并且利用GPS模块:微科VK2828U7G5LF,将经纬度信息同时发送到手 ...
011-指针（上）-C语言笔记
011-指针(上)-C语言笔记学习目标 1.[掌握]字符串常用函数 2.[掌握]指针变量的声明 3.[掌握]指针变量的初始化 4.[掌握]函数与指针 5.[掌握]指针的数据类型 6.[掌握]多级指针 ...
GeoGebra重复手段实现
1.自定义工具部分可以在网上搜一些别人做的工具,主要是把自己经常做的一些任务做成工具,减少重复过程 2.列表部分的简单操作如图所示,实现对三个点的多项式拟合 3.通过序列指令格式可以做一个好玩的效果, ...
熬夜整理出来的干货：Python+Pycharm+PyQT5可视化程序设计入门
前言文的文字及图片来源于网络,仅供学习.交流使用,不具有任何商业用途,版权归原作者所有,如有问题请及时联系我们以作处理. 作者:朱淑强 PS:如有需要Python学习资料的小伙伴可以加点击下方链接自 ...
Problem L. World Cup
题目大意:有A,B,C,D四个队伍,两两之间有一个比赛,假如A和B比赛,如果平局,各加一分,如果说A胜,给A加3分,不给B加分,B胜同理给出A,B,C,D,的得分,判断形成这种局面有多少种方式. 思 ...
爬虫实战2_有道翻译sign破解
目标url 有道翻译打开网站输入要翻译的内容,一一查找network发现数据返回json格式,红框就是我们的翻译结果查看headers,发现返回结果的请求是post请求,且携带一大堆form_da ...
python列表简介
什么是列表?如何使用列表?https://docs.python.org/3/library/stdtypes.html#sequence-types-list-tuple-range 列表相关知识: ...
windows 系统使用技巧
1 自定义发送到C:\Users\adm\AppData\Roaming\Microsoft\Windows\SendTo 2 自定义关机shutdown -s -t time,可写在快捷方式中shu ...
总结vscode调试vue,nodejs的各种方法
之前写项目一直都是console.log()来调试的,浪费了很多时间,现在整理一下用vscode对nuxt(vue)前后端进行调试的方法前端的调试 chrome+launch 使用chrome调试, ...
动静结合？Ruby 和 Java 的基础语法比较（入门篇）
前言这篇文章示例代码比较多, Java 程序员可以看到一些 Ruby 相关语法和使用,Ruby 程序员可以看看 Java 的基本语法和使用方法,本文比较长,将近万字左右,预计需要十几分钟,如果有耐心 ...

前端——localStorage详细总结