localStorage sessionStorage cookie indexedDB

目录:

  1. localStorage
  2. sessionStorage
  3. cookie
  4. indexedDB

localStorage

  1. localStorage存储的数据能在跨浏览器会话保留
  2. 数据可以长期保留,关闭会话,数据不会被清除
  3. 存储的键值对,是以字符串的形式存储的,数值类型会自动转化为字符串。

用法

// 等价,键值对以字符串形式存储,和js对象不一样
window.localStorage.setItem('x',1) // '1'
window.localStorage.setItem('x','1') // '1'

//  等价
localStorage.color = 'red'
localStorage['color'] = 'red'
localStorage.setItem('color','red')

localStorage.setItem('age',18)
localStorage.getItem('age')
localStorage.removeItem('age')
localStorage.clear(); //  清除所有localStorage

参考:

  1. MDN:window.localStorage

sessionStorage

  1. 页面会话结束时会被清除
  2. 键值对以字符串形式存储

用法

sessionStorage.setItem('name','zhangsan')
sessionStorage.getItem('name')
sessionStorage.removeItem('name')
sessionStorage.clear() 

运用

页面刷新时恢复表单内容

        <form action="#" method="post">
            <label for="name">name
                <input type="text" id="name" placeholder="Input your name" value="hello thank you ">
            </label>
            <button id="submit" type="submit">submit</button>
        </form>
// 页面刷新时恢复表单内容
        let name = document.getElementById('name');

        // 事件侦听,存储输入框内容
        name.addEventListener('change',function(e) {
            window.sessionStorage.setItem('name',e.currentTarget.value)
        })

        // 判断有无缓存,没有返回null
        if(sessionStorage.getItem('name')) {
            name.value = sessionStorage.getItem('name');
        }

cookie

是服务器发送到用户浏览器并保存在本地的一小块数据,它会在浏览器下次向同一服务器再发起请求时被携带并发送到服务器上。通常,它用于告知服务端两个请求是否来自同一浏览器,如保持用户的登录状态。Cookie使基于无状态的HTTP协议记录稳定的状态信息成为了可能。

用途

  1. 会话状态管理(如用户登录状态、购物车、游戏分数或其它需要记录的信息)
  2. 个性化设置(如用户自定义设置、主题等)
  3. 浏览器行为跟踪(如跟踪分析用户行为等)

缺点

服务器指定cookie后,请求中都会携带cookie,会带来额外的性能开销。

创建cookie

res.setHeader('Set-Cookie',['type=ninjia','langauge=javascript'])  // nodejs
res.cookie('rememberme','1',{domanin:'example.com',expires:new Date()}) // express

在以后的请求中,req头部将被添加cookie信息,如:

  req.cookies // cookies: { rememberme: '1' },

cookie类别

  • 会话期cookie
  • 持久化cookie

JavaScript通过document.cookies操作cookie

只能访问非httpOnly标记的cookie

document.cookie = 'name=zhangsan'
document.cookie = 'age = 20'  // 浏览器请求cookie中将会添加cookie

indexedDB

事务型数据库系统,用于存储大量结构化的数据

window.indexedDB.open('test') // 创建、打开数据库

参考:

原文地址:https://www.cnblogs.com/rosendolu/p/10790489.html

时间: 2024-10-25 15:07:57

localStorage sessionStorage cookie indexedDB的相关文章

localstorage sessionstorage cookie 备忘

/* sessionStorage: 保存的数据用于浏览器的一次会话,当会话结束(通常是该窗口关闭),数据被清空: localStorage: 保存的数据长期存在,下一次访问该网站的时候,网页可以直接读取以前保存的数据. Cookie: Cookie的内容会随着请求一并发送的服务器,容量小. 本地存储的有点: 减少网络流量,一旦数据保存在本地后,就可以避免再向服务器请求数据,因此减少了不必要的数据请求, 减少数据在浏览器和服务器间不必要地来回传递.从本地读数据比通过网络从服务器获得数据快得多.

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

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

localStorage,sessionStorage,cookie区别

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

深入了解浏览器存储:对比Cookie、LocalStorage、sessionStorage与IndexedDB

摘要: 对比Cookie.LocalStorage.sessionStorage与IndexedDB 作者:浪里行舟 Fundebug经授权转载,版权归原作者所有. 前言 随着移动网络的发展与演化,我们手机上现在除了有原生 App,还能跑"WebApp"--它即开即用,用完即走.一个优秀的 WebApp 甚至可以拥有和原生 App 媲美的功能和体验.WebApp 优异的性能表现,有一部分原因要归功于浏览器存储技术的提升.cookie存储数据的功能已经很难满足开发所需,逐渐被WebSto

深入了解浏览器存储:对比Cookie、LocalStorage、sessionStorage与IndexedDB(转)

前言 随着移动网络的发展与演化,我们手机上现在除了有原生 App,还能跑“WebApp”——它即开即用,用完即走.一个优秀的 WebApp 甚至可以拥有和原生 App 媲美的功能和体验.WebApp 优异的性能表现,有一部分原因要归功于浏览器存储技术的提升.cookie存储数据的功能已经很难满足开发所需,逐渐被WebStorage.IndexedDB所取代,本文将介绍这几种存储方式的差异和优缺点. 想阅读更多优质文章请猛戳GitHub博客 一.Cookie 1. Cookie的来源 Cookie

sessionStorage 、localStorage 和 cookie 之间的区别(转)

sessionStorage 和 localStorage 是HTML5 Web Storage API 提供的,可以方便的在web请求之间保存数据.有了本地数据,就可以避免数据在浏览器和服务器间不必要地来回传递.sessionStorage.localStorage.cookie都是在浏览器端存储的数据,其中sessionStorage的概念很特别,引入了一个“浏览器窗口”的概念.sessionStorage是在同源的同窗口(或tab)中,始终存在的数据.也就是说只要这个浏览器窗口没有关闭,即

sessionStorage 、localStorage 和 cookie 对比区分

基本概念 Cookie Cookie 是小甜饼的意思.顾名思义,cookie 确实非常小,它的大小限制为4KB左右,是网景公司的前雇员 Lou Montulli 在1993年3月的发明.它的主要用途有保存登录信息,比如你登录某个网站市场可以看到"记住密码",这通常就是通过在 Cookie 中存入一段辨别用户身份的数据来实现的. localStorage localStorage 是 HTML5 标准中新加入的技术,它并不是什么划时代的新东西.早在 IE 6 时代,就有一个叫 userD

sessionStorage localStorage 和 cookie 之间的异同

(转) sessionStorage 和 localStorage 是HTML5 Web Storage API 提供的,可以方便的在web请求之间保存数据.有了本地数据,就可以避免数据在浏览器和服务器间不必要地来回传递. sessionStorage.localStorage.cookie都是在浏览器端存储的数据,其中sessionStorage的概念很特别,引入了一个"浏览器窗口"的概念.sessionStorage是在同源的同窗口(或tab)中,始终存在的数据.也就是说只要这个浏

sessionStorage、localStorage、cookie

sessionStorage 和 localStorage 是HTML5 Web Storage API 提供的,可以方便的在web请求之间保存数据.有了本地数据,就可以避免数据在浏览器和服务器间不必要地来回传递.    sessionStorage.localStorage.cookie都是在浏览器端存储的数据,其中sessionStorage的概念很特别,引入了一个“浏览器窗口”的概念.sessionStorage是在同源的同窗口(或tab)中,始终存在的数据.也就是说只要这个浏览器窗口没有