本地存储:把一些信息存储到客户端本地(主要目的有很多,其中有一个就是实现多页面之间的信息共享)
 
    1. 离线缓存(xxx.manifest)  H5处理离线缓存还是存在一些硬伤的,所以真实项目中一般还是传统的NATIVE APP来完成这件事情
    2. localStorage / sessionStorage:H5中新增加的API,基于这个API可以把一些数据缓存到客户端本地 (常用)
    3. IndexedDB / webSQL :本地数据库存储
    4. Cookie:本地信息存储(常用)
    5. CacheStorage / ApplicationCache:本地缓存存储

 
用到本地存储的地方:
   [页面之间信息的通信]
       A存储信息,B页面中可以获取
       1. 登录
       2. 记住用户名密码(或者自动登录)
       3. 购物车
       4. 跳转到其它页面,返回上级页面的时候停留在之前最后一次
 
我们来看看本地存储cookie和服务端session的具体做法及使用场景

[做一些性能优化]
       把一些不经常改变的数据,在第一次从服务器端获取到之后,存储到客户端本地(记录一个存储时间),假设我们设置有效存储期是10分钟,那么10分钟以内,我们再刷新页面,就不用再向服务器发送请求了,直接从本地数据中获取展示即可;超过10分钟,从新向服务器发送请求,请求回来最新数据参考第一次,也一样存储到本地中...
       1. 可减轻服务器压力
       2. 对于不经常更新的数据我们可以把存储周期设置的长一些,有助于页面第二次加载的时候,渲染的速度(移动端经常做这些事情)
 
localStorage VS cookie
      [cookie]
         1.兼容所有的浏览器
         2.有存储的大小限制,一般一个源(一个域下)只能存储4KB内容
         3.cookie有过期时间(当然我们自己可以手动设置这个时间)
         4.杀毒软件或者浏览器的垃圾清理都可能会把cookie信息强制清除掉
         5.在隐私或者无痕浏览模式下,是不记录cookie的
         6.cookie不是严格的本地存储,因为要和服务器之间来回传输
      [localStorage]
         1.不兼容IE8及以下
         2.也有存储的大小限制,一个源下最多只能存储5MB左右
         3.本地永久存储,只要你不手动删除,永远存储在本地(但是我们可以基于API  removeItem/clear手动清除一些自己想要删除的信息)
         4.杀毒软件或者浏览器的垃圾清理暂时不会清除localStorage(新版本谷歌浏览器会清除localStorage等信息)
         5.在隐私或者无痕浏览模式下,是记录localStorage的
         6.localStorage和服务器没有半毛钱关系

  

      真实项目中使用本地存储来完成一些需求的情况不是很多,一般都是基于服务器的session或者数据库存储完成的(服务器的session和本地的cookie是有关联的),如果不考虑兼容,就想基于本地存储来完成一些事情,那么一般都是用localStorage的(尤其是移动端开发)
      localStorage.setItem([key],[value]):[value]必须是字符串格式的(即使写的不是字符串,也会默认转换为字符串)
      localStorage.getItem([key]):通过属性名获取存储的信息
      localStorage.removeItem([key]):删除指定的存储信息
      localStorage.clear():清除当前域下存储的所有信息
      localStorage.key(0):基于索引获取指定的KEY名
      document.cookie='';//=>设置cookie

本地存储常用方式 localStorage, sessionStorage,cookie 的区别 和 服务器存储session的更多相关文章

  1. localstorage sessionstorage cookie的区别

    一.基本概念 Cookie cookie比较小,大小限制在4kb左右,是网景公司的前雇员 LouMontulli 在1993年3月的发明.它的主要用途有保存登录信息,比如你登录某个网站市场可以看到“记 ...

  2. 客户端 localStorage, sessionStorage, cookie 的区别

    SessionStorage, LocalStorage, Cookie这三者都可以被用来在浏览器端存储数据,而且都是字符串类型的键值对! 区别在于前两者属于WebStorage,创建它们的目的便是存 ...

  3. localStorage sessionStorage cookie indexedDB

    目录: localStorage sessionStorage cookie indexedDB localStorage localStorage存储的数据能在跨浏览器会话保留 数据可以长期保留,关 ...

  4. cookie和session,sessionStorage、localStorage和cookie的区别

    1.cookie 含义: 存储在访问者的计算机中的变量,即存储在客户端 创建一个cookie /* getCookie方法判断document.cookie对象中是否存有cookie,若有则判断该co ...

  5. localStorage,sessionStorage,cookie使用场景和区别

    localStorage:HTML5新增的在浏览器端存储数据的方法.设置和获取localStorage的方法: 设置: localStorage.name = 'zjj'; 获取: localStor ...

  6. localStorage,sessionStorage,cookie区别

    localStorage:HTML5新增的在浏览器端存储数据的方法.设置和获取localStorage的方法: 设置: localStorage.name = 'zjj'; 获取: localStor ...

  7. localStorage&sessionStorage&Cookie

    localStorage.sessionStorage.Cookie三者区别如下:

  8. [转]session和cookie的区别和联系,session的生命周期,多个服务部署时session管理

    Session和Cookie的区别 对象 信息量大小 保存时间 应用范围 保存位置 Session 小量,简单的数据 用户活动时间+一段延迟时间(一般为20分钟) 单个用户 服务器端 Cookie 小 ...

  9. 本地存储 localStorage/sessionStorage/cookie

    cookie是个基础的东西.是服务器发送到客户端,存储在客户端的一小段数据.可以存储一些配置信息,客户标识信息等.用户下次访问这个网站时,会把上次网站发来的cookie一同发送回去.cookie保存在 ...

随机推荐

  1. emacs考场短配置

    (set-background-color "gray15") (set-foreground-color "gray") ;;设置颜色 (global-set ...

  2. 前端与算法 leetcode 283. 移动零

    目录 # 前端与算法 leetcode 283. 移动零 题目描述 概要 提示 解析 解法一:暴力法 解法二:双指针法 算法 传入[0,1,0,3,12]的运行结果 执行结果 GitHub仓库 # 前 ...

  3. [考试反思]1011csp-s模拟测试68:守恒

    在RP守恒定律的持续作用下, 不出所料,这场稍炸 还有10分钟就是下一场了,但愿继续守恒? 改题太慢了,连写博的时间都没有了 然而最后还是在吃饭前彻彻底底改出来了 的确是个菜鸡 所以今天的题解只能先咕 ...

  4. NOIP模拟测试40

    考试时打了三个正解(或者叫能A的算法?),但是最终一个都没有A. 比较失败的一次考试. T1.队长快跑 先打了70分的dp,然后发现这个式子可以优化,拿线段树搞一下就好了,发现考试已经过去1h了,决定 ...

  5. bzoj1004 card

    明知是burnside然而根本不会然后无耻地颓了题解后一脸傻气的我: 直接套公式???为啥方案数==等价类数量啊??? skyh:显然啊(狂笑)(hey wxy!他问为啥方案书等于等价类数量!) wx ...

  6. Mybaits 源码解析 (十)----- 全网最详细,没有之一:Spring-Mybatis框架使用与源码解析

    在前面几篇文章中我们主要分析了Mybatis的单独使用,在实际在常规项目开发中,大部分都会使用mybatis与Spring结合起来使用,毕竟现在不用Spring开发的项目实在太少了.本篇文章便来介绍下 ...

  7. CSS尺寸样式属性

    尺寸样式属性介绍 属性 值 含义 height auto:自动,浏览器会自动计算高度length:使用px定义高度%:基于包含它的块级对象的百分比高度 设置元素高度 width 同上 设置元素的宽度 ...

  8. H5+app -- 关于ajax提交问题

    1.前阵子在做系统的h5+ app为满足手机端也能进行业务操作,例如:提货,扫描入库之类的.所以就要将做接口,从手机端调用后台系统的方法. 2.例如这样的请求格式,但是呢,每次请求它都直接跳到erro ...

  9. eclipse中springmvc框架出现404

    出现404报错信息: 1.我出现的错误是配置没问题,找了一圈发现自己单词拼错了,导致运行不了,出现404 2.配置问题: jar包:首先导入spring 的jar包15个,log4j两个,junit两 ...

  10. 利用JaCoCo统计接口测试中代码覆盖率

    ​        做接口测试,很多时候都会听到,你接口测试的覆盖率是多少?很多人会回答80%,你怎么统计的,他说覆盖了80%的需求.这个回答没有错误,但是片面,我们不能只考虑需求的覆盖率,还有业务的覆 ...