localStorage 的优势

  • localStorage 拓展了 cookie 的 4K 限制。
  • localStorage 会可以将第一次请求的数据直接存储到本地,这个相当于一个 5M 大小的针对于前端页面的数据库,相比于 cookie 可以节约带宽,但是这个却是只有在高版本的浏览器中才支持的。

localStorage 的局限

  • 浏览器的大小不统一,并且在 IE8 以上的 IE 版本才支持 localStorage 这个属性。
  • 目前所有的浏览器中都会把localStorage的值类型限定为string类型,这个在对我们日常比较常见的JSON对象类型需要一些转换。
  • localStorage在浏览器的隐私模式下面是不可读取的。
  • localStorage本质上是对字符串的读取,如果存储内容多的话会消耗内存空间,会导致页面变卡。
  • localStorage不能被爬虫抓取到。

localStorage 与 sessionStorage 区别

  localStorage 与 sessionStorage 的唯一一点区别就是 localStorage 属于永久性存储,而 sessionStorage 属于当会话结束的时候,sessionStorage 中的键值对会被清空。

localStorage 作用域

  localStorage只要在相同的协议、相同的主机名、相同的端口下,就能读取/修改到同一份localStorage数据。

  1. 由于域名不同,不能进行共享。
  2. 二个webview相当于同一个浏览器的不同标签页。所以可以共享。

写入方法:

localStorage.setItem('item1', 'C#')

localStorage['item2'] = 'Java'

localStorage.item3 = 'PHP'

读取方法:

localStorage.getItem('item1')

localStorage["item2"]

localStorage.item3

清除某个元素:

localStorage.removeItem('item1')

清除所有元素:

localStorage.clear()

获取某个位置对应的键值:

localStorage.key(0)

参考:

https://segmentfault.com/a/1190000018954001

https://www.runoob.com/jsref/prop-win-localstorage.html

localStorage 存储的更多相关文章

  1. 使用sessionStorage、localStorage存储数组与对象(转)

    http://my.oschina.net/crazymus/blog/371757 使用sessionStorage.localStorage存储数组与对象 发表于3个月前(2015-01-26 1 ...

  2. LocalStorage存储

     1.localStorage存储服务: .factory('storageSvc', [function () { return { //保存数据 save: function (key, valu ...

  3. AngularJS进阶(二十九)AngularJS项目开发技巧之localStorage存储

    AngularJS项目开发技巧之localStorage存储       注: localStorage深度学习 绪 项目开发完毕,测试阶段发现后台管理端二维码生成有问题,问题在于localStora ...

  4. 使用sessionStorage、localStorage存储数组与对象

    先介绍一下localStorage localStorage对象是HTML5的客户端存储持久化数据的方案.为了能访问到同一个localStorage对象,页面必须来自同一个域名(子域名无效),使用同一 ...

  5. localStorage存储对象,sessionStorage存储数组对象

    前言 最近在用angular做商城购物车的功能模块,因为angular的watch监听,数据只要发生变化就能很方便的自动渲染页面.但随即出现的问题是,之前用户操作的样式都会被重置掉. 例如我勾选了几个 ...

  6. localStorage存储数组,对象,localStorage,sessionStorage存储数组对象

    localStorage存储数组,对象,localStorage,sessionStorage存储数组对象   前言 最近在用angular做商城购物车的功能模块,因为angular的watch监听, ...

  7. LocalStorage存储JSON对象的问题

    LocalStorage存储JSON对象的问题   localStorage - 没有时间限制的数据存储 1 var arr=[1,2,3]; 2 localStorage.setItem(" ...

  8. localstorage存储对象

    之前在客户端存储数据一直用的是cookie,由于有大小等限制,随着html5时代的到来,现在大多数用的是localstorage存储数据: 例如: localStorage.setItem(" ...

  9. HTML5 WEB Storage - localStorage存储位置在哪

    localStorage作为客户端浏览器持久化存储方案 这个是浏览器隔离的,每个浏览器都会把localStorage存储在自己的UserData中,如chrome一般就是 C:\Users\你的计算机 ...

  10. Android WebView js混合cookie和localStorage存储

    一.cookie存储和取出: (1)存储: ------------------- **在loadURL之前调用** -------------------- /** * 同步一下cookie */ ...

随机推荐

  1. Http协议 Content-Type

    详情:https://www.cnblogs.com/ranyonsue/p/5984001.html *****Referer:包含一个URL,用户从该URL代表的页面出发访问当前请求的页面. ** ...

  2. 异步查询转同步加redis业务实现的BUG分享

    在最近的性能测试中,某一个查询接口指标不通过,开发做了N次优化,最终的优化方案如下:异步查询然后转同步,再加上redis缓存.此为背景. 在测试过程中发现一个BUG:同样的请求在第一次查询结果是OK的 ...

  3. 14、python异常处理及断言

    前言:本文主要介绍python中异常的处理及断言,包括异常类型.异常捕获.主动跑出异常和断言. 一.异常类型介绍 什么是异常?异常即是一个事件,该事件会在程序执行过程中发生,会影响程序的正常执行,一般 ...

  4. 如何取消chrome的自动翻译

    设置中搜索“翻译” 然后关掉“询问是否翻译非您所用语言的网页”的选项即可 需要翻译的时候在目标网页右键“翻译成中文”即可 用github的时候烦的要死,翻译的贼不准.

  5. Windows版Redis主从配置

    一.下载 从github上下载Redis的zip包,地址:https://github.com/MicrosoftArchive/redis/releases Redis本身不支持windows,这是 ...

  6. 透过现象看webpack处理css文件中图片路径转换的具体过程

    webpack是目前使用比较流行的一个前端模块打包器,前端的任何资源都被当成一个模块来处理,如图片.css文件等等.在基于webpack构建的前端项目中,一般都会配置有关css文件处理的规则,这其中也 ...

  7. 通过openjdk源码分析ObjectMonitor底层实现

    通过openjdk源码分析ObjectMonitor底层实现 Hotspot JDK只是部分开源,将底层的调用C++的native方法的具体实现屏蔽了,而openjdk则将这部分也开源了,接下来我们通 ...

  8. 如何优雅地使用containerd?这里有一份必读的技巧攻略

    前 言 Docker是我们常用的容器runtime,友好的CLI,丰富的社区资料,外加研发运维人员多年的经验积累,使用Docker几乎是没有任何门槛的事.而k3s为了降低资源消耗,将默认的runtim ...

  9. c/c++判断文件是否存在

    #define _CRT_SECURE_NO_WARNINGS #include <iostream> #include <fstream> #include <cstd ...

  10. 🔥SpringBoot图文教程2—日志的使用「logback」「log4j」

    有天上飞的概念,就要有落地的实现 概念+代码实现是本文的特点,教程将涵盖完整的图文教程,代码案例 文章结尾配套自测面试题,学完技术自我测试更扎实 概念十遍不如代码一遍,朋友,希望你把文中所有的代码案例 ...