客户端存储技术

function initData() {
    if (getCookie('username') && getCookie('psd')) {
        //需要进行的操作
    }
}

注意：这里可能有人会有疑问，只要有用户名密码就好了吗？

• 我的答案是：是的，因为我们可以在用户登录的时候，只有用户成功登录了，我们才会为它设置cookie，所以，不用担心密码错误的问题。

以上就是JavaScript中操作利用cookie实现自动登录的实现过程，设置，获取，移除

对cookie的限制及特性决定了cookie并不是存储大量数据的理想方式。因此，其他客户端技术出现了

注意：不要在cookie中存储重要或敏感信息，cookie的数据保存并不是在安全的地方。

2. Web Storage

在HTML5中引进了两种存储方式sessionStorage和localStorage。web Storage的目的解决通过客户端存储不需要频繁发送回服务器的数据时使用cookie的问题。

localStorage和sessionStorage存储在用户本地的浏览器上，不像cookie一样携带在http请求头部的字段中，有效的避免了性能问题。localStorge同样也采用了同源策略对存储的容量进行了限制，大多数设置限制为同一域名5M的存储空间。

这里重点讲本地存储，临时存储的方法相同

注意：两种方式存储的值都只能是==字符串==的形式

2.1 localStorage对象

localStorage：没有时间限制，持续范围超过当前会话，浏览器关闭再打开数据依然是可用的（注意是同一域名下）

localstorage的存储方式是以==key-value==的形式进行存储的，首先我们先了解以下其中的操作方法

1. localstorage.length：获取当前存储中的键值对数量

2. localstorage.key(index)：得到某个索引的键值

3. localstorage.getItem(key)：读取对应键值的数据

4. localstorage.setItem(key,value)：设置对应的键值对，保存数据

5. localstorage.remove(key)：清除某个指定数据

6. localstorage.clear()：清除存储的所有数据

2.1.1 小demo

接下来先实现一个简单的保存查找功能，有以下

• 保存用户的名称，以及拥有的金钱数量
• 通过用户名查询到对应的金钱数量

代码实现

function set() {
    let myName = document.querySelector('#myName').value;//获取需要保存的用户名
    let money = document.querySelector('#money').value;//金钱数量
    localStorage.setItem(myName, money);//保存
}

function find() {
    let searchName = document.querySelector('#searchName').value;
    let youMoney = localStorage.getItem(searchName);
    let findEnd = document.querySelector('#findEnd');//页面上的渲染位置
    findEnd.innerHTML = youMoney;
}

//delete localStorage.myName;
localStorage.removeItem(myName)

let user = {
    username: 'ljc',
    age: '20',
    sickName : '小猴',
    sex : '男'
}
user = JSON.stringify(user)
localStorage.setItem('my', user);

let userArr = []
userArr.push(user) 
userArr = JSON.stringify(userArr)