如果我说得啰嗦了,请麻烦提醒我一下~~

面试的时候说:

首先这三个可以在浏览器端按下F12,在Application可以查看到.

如下图:

cookies:

sessionStorage:

sessionStorage的生命周期比较短

localStorage:

1. js给我们提供了一个本地数据存储的方案: window.localstorage
2. 可以做存, 取, 删的操作
* setItem("key", "value")
* getItem("key")
* removeItem("key")
3. 数据是存储在用户的电脑上的, 一直存储,时间比较长
    4.localStorage安全性不高,不适用存储私密的信息,像密码之类的

sessionStorage的生命周期比较短,只要关闭浏览器,数据就没有了。

应用场景:就比如跨页面的表单填写啊,临时的去记录一些数据。

localStorage的数据是存储在用户的电脑上的,一直存储,时间比较长,除非用户手动去清除它。

应用场景:比如说用于记录,搜索历史,购物车啊,用户关闭浏览器,下次打开数据还存在。

localStorage的应用范围更加广泛。

举一个小栗子,自己在做webapp的时候用到的

搜索页面的功能分析

  1. 添加搜索历史记录 : 当前搜索框输入内容 点击搜索按钮 会搜索的内容添加到搜索历史记录的列表
    1. 给搜索按钮添加点击事件
    2. 获取当前输入输入的内容
    3. 获取本地存储对象 如果没有就设置为一个空数组
    4. 把当前输入的内容 添加到数组里面
    5. 把数组重新存储到本地存储里面
  2. 查询搜索历史记录: 查询搜索历史记录渲染到列表里面
    1. 获取本地存储的历史记录 (转成数组)
    2. 使用数组渲染页面
  3. 删除搜索历史记录 点击x的时候要删除当前行的搜索历史记录
    1. 要给所有x添加点击事件
    2. 拿到当前点击的x对应的搜索历史的id
    3. 从所有的数组里面查找这个id 把当前的值删除掉
    4. 重新把删除后的数组保存到本地存储里面
    5. 删完之后重新渲染页面(要重新查询一次)
  4. 清空搜索历史记录 点击清空记录的时候 清除所有的搜索历史记录
  5. 点击某个搜索历史时候调整到商品列表页面实现搜索当前商品
  6. 以上的所有功能都是操作本地存储只是操作本地存储的增删改查 localStorage
  7. 本地存储有两个
    1. localStorage : 数据永久存在除非手动删除 存储空间大 (永久存储)
    2. sessionStorage : 关掉浏览器数据就自动删除 存储空间小(临时存储)

关于cookies,sessionStorage和localStorage的区别的更多相关文章

  1. cookies,sessionStorage和localStorage的区别

    联系: sessionStorage和localStorage一样,都是用来缓存客户端缓存信息. 他们都只能存储字符串类型对象. 区别: localStorage的生命周期是永久的,除非用户主动清除浏 ...

  2. cookies,sessionStorage 和 localStorage 的区别

    请描述一下 cookies,sessionStorage 和 localStorage 的区别? sessionStorage 和 localStorage 是HTML5 Web Storage AP ...

  3. 7,请描述下cookies,sessionStorage和localStorage的区别

    7,请描述下cookies,sessionStorage和localStorage的区别 首先,cookie是网站为了标识用户身份而储存在用户本地终端(client side,百科: 本地终端指与计算 ...

  4. cookies、sessionStorage和localStorage的区别

    cookies.sessionStorage和localStorage的区别 对比 特性 Cookie LocalStorage SessionStorage 数据的生命周期              ...

  5. cookies,sessionStorage和localStorage的区别

    共同点:都是保存在浏览器端,且同源的.区别:cookie数据始终在同源的http请求中携带(即使不需要),即cookie在浏览器和服务器间来回传递.而sessionStorage和localStora ...

  6. 描述一下 cookies,sessionStorage 和 localStorage 的区别?

    sessionStorage 和 localStorage 是HTML5 Web Storage API 提供的,可以方便的在web请求之间保存数据.有了本地数据,就可以避免数据在浏览器和服务器间不必 ...

  7. cookies,sessionStorage,localStorage的区别

    sessionStorage 和 localStorage 是HTML5 Web Storage API 提供的,可以方便的在web请求之间保存数据.有了本地数据,就可以避免数据在浏览器和服务器间不必 ...

  8. 描述一下 cookies,sessionStorage 和 localStorage 的区别

    cookie是网站为了标示用户身份而储存在用户本地终端(Client Side)上的数据(通常经过加密),数据会在浏览器和服务器间来回传递.sessionStorage和localStorage不会自 ...

  9. 请描述一下 cookies,sessionStorage和localStorage的区别?

    cookie在浏览器和服务器间来回传递. sessionStorage和localStorage不会sessionStorage和localStorage的存储空间更大:sessionStorage和 ...

随机推荐

  1. 【二叉树的递归】02二叉树的最大深度【Maximum Depth of Binary Tree】

    ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ 给定一个二叉树,找出他的最小的深度 ...

  2. 【二叉查找树】02不同的二叉查找树个数II【Unique Binary Search Trees II】

    提到二叉查找树,就得想到二叉查找树的递归定义, 左子树的节点值都小于根节点,右子树的节点值都大于根节点. +++++++++++++++++++++++++++++++++++++++++++++++ ...

  3. LiveMediaStreamer

    LiveMediaStreamer is an open source multimedia framework that allows the manipulation of multiple au ...

  4. VBA中的函数Timer用法

    第1.40例 Timer 函数一.题目: 要求编写一段代码,运用 Timer 函数来计算本代码运行所化的时间.二.代码:Sub 示例_1_040()    Dim t, i&, a    t ...

  5. play 学习 一 : 构建SBT的play项目

    因为帮一个朋友做一个简单的项目,档案管理.同时也为了自己能学习PLay框架,所以记录一下. 项目GitHub地址: https://github.com/liufeiSAP/ArchiveManage ...

  6. 微服务学习一 微服务session 管理

    集群和分布式架构中: session管理有三种方法: 1: Cookie: 将Session对象保存在Cookie,保存在浏览器端.浏览器发送请求的时候,会把整个session放在请求里一起发送到se ...

  7. hibernate HQL查询

    hql(都要在事务中完成)session.beginTransaction();session.getTransaction().commit(); session.beginTransaction( ...

  8. 【原】spring jar 下载

    作者:david_zhang@sh [转载时请以超链接形式标明文章] 链接:http://www.cnblogs.com/david-zhang-index/p/8098965.html 1.进入官网 ...

  9. servlet课堂笔记

    1.servlet生命周期: 1> 加载和实例化 2> 初始化 init() 3> 处理请求 service()->doGet()/doPost() 4> 销毁 dest ...

  10. Dialog 自定义使用3(回调点击事件)

    1 , Dialog布局 <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns ...