localStorage sessionStorage cookie indexedDB

localStorage
sessionStorage
cookie
indexedDB

localStorage

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

用法

// 等价，键值对以字符串形式存储，和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

参考：

MDN:window.localStorage

sessionStorage

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

用法

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协议记录稳定的状态信息成为了可能。

用途

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

缺点

服务器指定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') // 创建、打开数据库

参考：

巴特西

localStorage sessionStorage cookie indexedDB

localStorage

用法

sessionStorage

用法

运用

cookie

用途

缺点

创建cookie

cookie类别

JavaScript通过document.cookies操作cookie

indexedDB

最新文章

热门文章