localStorage sessionStorage cookie indexedDB

Posted 2021-11-02 rosendolu

目录：

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') // 创建、打开数据库

参考：

• MDN:http cookie
• MDN:indexedDB