tbom/examples/src/storage/index.js

Taobao Open Platform Modules

import {createElement, Component} from 'rax';
import View from 'tboc-view';
import Text from 'tboc-text';
import styles from '../common/style.css';
import { storage } from '../../../src/index';


const log = [];
class StorageDemo extends Component {

  state = {
    val: null,
    log: []
  }

  setVal = () => {
    const val = Math.random();
    storage.setItem('val', val, () => {
      log.push(`val = ${val}`);
      this.setState({
        log: log
      });
    });
  }

  getVal = () => {
    storage.getItem('val', (val) => {
      log.push(`get val: ${val.data}`);
      this.setState({
        log: log
      });
    });
  }
  
  render() {
    return (
      <View style={styles.app}>
        {
          this.state.log.map((val) => {
            return (<Text>{val}</Text>)
          })
        }
        <View clickable={true}onPress={this.setVal} onClick={this.setVal} style={demoStyles.button}>保存一个随机数</View>
        <View clickable={true}onPress={this.getVal} onClick={this.getVal} style={demoStyles.button}>获取</View>
      </View>
    );
  }
}

const demoStyles = {
  input: {
    borderWidth: 2,
    borderColor: '#CCC',
    borderStyle: 'solid'
  },
  text: {
    paddingLeft: 20,
    paddingRight: 20
  },
  button: {
    borderWidth: 2,
    borderColor: '#CCC',
    borderStyle: 'solid',
    paddingLeft: 20,
    paddingRight: 20,
    marginTop: 40,
    backgroundColor: '#EEE'
  }
}

export default StorageDemo;